Как сделать, чтобы количество активных чекбоксов не опускалось ниже определённого?

Question

[luxurypluxury]

Есть чекбоксы, первый изначально checked, можно сделать хоть все чекбоксы checked, но нужно, чтобы если один оставался checked, то нельзя было его сделать unchecked.

Соурс

Answer 1

[0xD34F]

Где чекбоксы находятся, что за чекбоксы, каковы ограничения на количество отмеченных, как посчитать количество отмеченных:

const container = document.querySelector('селектор общего предка чекбоксов');
const checkboxSelector = 'селектор чекбоксов';
const minChecked = 1;
const maxChecked = Infinity;
const countChecked = checkboxes =>
  Array.prototype.reduce.call(checkboxes, (acc, n) => acc + n.checked, 0);

Если количество отмеченных чекбоксов меньше или равно минимально допустимому - блокируйте их, если количество отмеченных чекбоксов больше или равно максимально допустимому - блокируйте те, что не отмечены:

const checkboxes = container.querySelectorAll(checkboxSelector);
const onChange = () => {
  const count = countChecked(checkboxes);
  const minReached = count <= minChecked;
  const maxReached = count >= maxChecked;
  checkboxes.forEach(n => n.disabled = minReached && n.checked || maxReached && !n.checked);
};

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

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

container.addEventListener('change', function({ target: t }) {
  if (t.matches(checkboxSelector)) {
    const count = countChecked(this.querySelectorAll(checkboxSelector));
    t.checked ||= count < minChecked;
    t.checked &&= count <= maxChecked;
  }
});

Comments

[Антон]

Ещё, насколько помню, disabled инпуты на сервер не уходят, так что перед отправкой надо снимать disabled, если форма сабмитится.

[luxurypluxury]

Есть такой вопрос, Антон, а как мне убрать disabled до отправки формы если я использую плагин Contact Form 7 для вордпресса

[Антон]

luxurypluxury, насколько я помню - там в итоге же обычная html-форма на странице оказывается. Так что надо на событие submit повесить обработчик, который снимет атрибут disabled. Насколько помню - так должно сработать.

Answer 2

[rPman]

тебе нужно использовать штатный <input type=radio...