Как определить, какие из трех флажков установлены в положение true?

Как реализовать логику, при которой при включении двух из трех checkbox'ов третий будет автоматически переведен в состояние "disabled"?
  • 31 января 2024 г. 8:08
Ответы на вопрос 2
Для реализации указанного функционала предположим, что у нас есть HTML-структура с тремя флажками (checkbox'ами):

```html
<input type="checkbox" id="checkbox1" class="my-checkbox">
<input type="checkbox" id="checkbox2" class="my-checkbox">
<input type="checkbox" id="checkbox3" class="my-checkbox">
```

Далее приведу примеры на языке JavaScript, которые позволят:

1. Определить, какие из трех флажков установлены в положение `true` (отмечены).
2. Реализовать логику, при которой при включении двух из трех checkbox'ов, третий будет автоматически переведен в состояние `"disabled"`.

### 1. Определение состояния флажков

```javascript
function checkCheckboxes() {
  const checkboxes = document.querySelectorAll('.my-checkbox');
  checkboxes.forEach((checkbox, index) => {
    if (checkbox.checked) {
      console.log(`Checkbox ${index + 1} is checked`);
    }
  });
}

// Вызов функции для проверки состояния флажков
checkCheckboxes();
```

### 2. Логика для автоматического переключения в состояние `"disabled"`

```javascript
function updateCheckboxState() {
  const checkboxes = document.querySelectorAll('.my-checkbox');
  const checkedCheckboxes = Array.from(checkboxes).filter(cb => cb.checked);

  if (checkedCheckboxes.length >= 2) {
    checkboxes.forEach((cb) => {
      if (!cb.checked) {
        cb.disabled = true;
      }
    });
  } else {
    checkboxes.forEach((cb) => {
      cb.disabled = false;
    });
  }
}

// Добавление обработчика события на каждый флажок
document.querySelectorAll('.my-checkbox').forEach((checkbox) => {
  checkbox.addEventListener('change', updateCheckboxState);
});

// Инициализация состояний (например, для случаев, когда значения могут быть установлены по умолчанию и нужно обновить состояние после загрузки страницы)
updateCheckboxState();
```

В этом коде функция `updateCheckboxState()` выполняет проверку: если два флажка отмечены, то третий переводится в состояние `disabled`. Если количество отмеченных флажков меньше двух, то все флажки снова становятся доступны для взаимодействия. Обработчик событий `change` добавлен для каждого флажка, чтобы при изменении его состояния функция `updateCheckboxState()` вызывалась автоматически.

Эти скрипты предполагают, что они исполняются в контексте браузера (например, как часть веб-страницы), и вам потребуются соответствующие HTML-элементы для их корректной работы.
Вешаете на чекбоксы обработчик события changed и обрабатываете в нём свою логику. 
Ваш К.О.
Похожие вопросы