Как настроить выбор только одного активного чекбокса из нескольких?

Как заставить все чекбоксы быть выбранными, но при этом предотвратить отмену выбора одного из них? Соурс
  • 13 октября 2023 г. 14:08
Ответы на вопрос 2
Для настройки выбора только одного активного чекбокса из нескольких можно использовать радиокнопки вместо чекбоксов. Радиокнопки работают таким образом, что при выборе одной из них, все остальные автоматически сбрасываются.

Пример кода с использованием радиокнопок:

```html
<input type="radio" name="option" id="option1">
<label for="option1">Option 1</label>

<input type="radio" name="option" id="option2">
<label for="option2">Option 2</label>

<input type="radio" name="option" id="option3">
<label for="option3">Option 3</label>
```

В этом примере, при выборе любой из радиокнопок, выбор предыдущей кнопки будет автоматически сброшен.

Чтобы заставить все чекбоксы быть выбранными и предотвратить отмену выбора одного из них, можно использовать JavaScript. Ниже приведен пример кода с использованием JavaScript:

```html
<input type="checkbox" name="option" id="option1" onclick="return false;">
<label for="option1">Option 1</label>

<input type="checkbox" name="option" id="option2" onclick="return false;">
<label for="option2">Option 2</label>

<input type="checkbox" name="option" id="option3" onclick="return false;">
<label for="option3">Option 3</label>
```

В этом примере, JavaScript обработчик `onclick="return false;"` предотвращает отмену выбора любого из чекбоксов при клике.
Если количество отмеченных чекбоксов меньше или равно минимально необходимому, то блокируйте их. Для этого используйте следующий код:

```javascript
const MIN_CHECKED = 1;
const checkboxes = [...document.querySelectorAll('[type="checkbox"]')];
checkboxes.forEach(n => n.addEventListener('change', onChange));

function onChange() {
  const checkedCount = checkboxes.reduce((acc, n) => acc + n.checked, 0);
  checkboxes.forEach(n => n.disabled = checkedCount <= MIN_CHECKED && n.checked);
}
```

Или, если хотите выставить обратно снятый чекбокс, можно использовать следующий код:

```javascript
function onChange({ target: t }) {
  const checkedCount = checkboxes.reduce((acc, n) => acc + n.checked, 0);
  t.checked = checkedCount < MIN_CHECKED || t.checked;
}
```

Оба варианта помогут вам контролировать количество отмеченных чекбоксов.
Похожие вопросы