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

Question

[Denis Izmailov]

Есть три checkbox и логика, что надо отслеживать какие 2 из 3 включены и понимать, какие true, а какие false.
То есть, когда мы включаем 2 из 3, то третий должен выставить disabled в true в любом варианте их переключения.

Comments

[Алексей Уколов]

Покажите хоть какие-то свои наработки.

Answer 1

[0xD34F]

Отключаем чекбоксы, изменение состояния которых нежелательно:

function restrictChecked({
  container,
  selector = 'input[type="checkbox"]',
  min = 0,
  max = Infinity,
  enableOnCancel = true,
}) {
  const checkboxes = [...container.querySelectorAll(selector)];
  const onChange = () => {
    const countChecked = checkboxes.reduce((acc, n) => acc + n.checked, 0);
    const minReached = countChecked <= min;
    const maxReached = countChecked >= max;
    checkboxes.forEach(n => n.disabled = minReached && n.checked || maxReached && !n.checked);
  };

  checkboxes.forEach(n => n.addEventListener('change', onChange));
  onChange();

  return () => checkboxes.forEach(n => {
    n.disabled &&= !enableOnCancel;
    n.removeEventListener('change', onChange);
  });
}

Или, откатываем нежелательные изменения:

function restrictChecked({
  container,
  selector = 'input[type="checkbox"]',
  min = 0,
  max = Infinity,
}) {
  function onChange({ target: t }) {
    if (t.matches(selector)) {
      const countChecked = this.querySelectorAll(`${selector}:checked`).length;
      t.checked ||= countChecked <  min;
      t.checked &&= countChecked <= max;
    }
  }

  container.addEventListener('change', onChange);

  return () => container.removeEventListener('change', onChange);
}

Answer 2

[Rsa97]

Вешаете на чекбоксы обработчик события changed и обрабатываете в нём свою логику.
Ваш К.О.