Как ограничить количество отмеченных чекбоксов?
Есть три checkbox и логика, что надо отслеживать какие 2 из 3 включены и понимать, какие true, а какие false.
То есть, когда мы включаем 2 из 3, то третий должен выставить disabled в true в любом варианте их переключения.
Дополнительно:
Покажите хоть какие-то свои наработки.
Ответы:
Отключаем чекбоксы, изменение состояния которых нежелательно:
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)); return () => checkboxes.forEach(n => { n.disabled &&= !enableOnCancel; n.removeEventListener('change', onChange); }); } |
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)); 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); } |
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); }
Вешаете на чекбоксы обработчик события changed и обрабатываете в нём свою логику.
Ваш К.О.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для ограничения количества отмеченных чекбоксов на веб-странице можно использовать JavaScript. Вот пример кода на JavaScript, который поможет вам реализовать эту функциональность:
```html
Option 1
Option 2
Option 3
Option 4
Option 5
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var limit = 3;
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
var checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
if (checkedCheckboxes.length > limit) {
this.checked = false;
}
});
});
```
В данном примере мы создаем форму с пятью чекбоксами и устанавливаем лимит на количество отмеченных чекбоксов равным 3. При изменении состояния любого чекбокса мы проверяем количество отмеченных чекбоксов и если оно превышает установленный лимит, то снимаем флажок с последнего отмеченного чекбокса.
Вы можете легко настроить этот код, изменив количество чекбоксов и лимит на количество отмеченных чекбоксов, чтобы он соответствовал вашим потребностям.