Это может быть легко решить, но я столкнулся со многими проблемами, поэтому я надеюсь, что кто-то может помочь. У меня есть группы флажков (варианты приходят из БД), что-то вроде этого

  • область1: 4 варианта
  • область 2: 6 вариантов
  • область X: варианты X и т. д.

Пользователь должен выбрать хотя бы одну опцию из одной группы / области, но не более 2 / группы из макс. 2 группы / зоны (также максимум 4 варианта; макс. 2 варианта на группу / зону; макс. 2 группы / зоны).

Я знаю, как ограничить количество отмеченных флажков для простого сценария, но у меня нет информации о вышеуказанной проблеме (также нашел несколько сообщений, то есть это .

Я надеюсь, что кто-то может помочь.

Заранее спасибо.

Пока у меня есть это (ограничить флажки для группы)

$(function(){ var max = 2; var checkboxes = $('.area {amp}gt; input[type="checkbox"]'); console.log(checkboxes); checkboxes.click(function(){ var $this = $(this); var set = checkboxes.filter('[name="'  this.name  '"]'); var current = set.filter(':checked').length; return current {amp}lt;= max; }); }); 
 .c { max-width: 1200px; margin: auto; } .area { margin-bottom: 10px;; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="c"{amp}gt; {amp}lt;div id="area1" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 1-1" id="option1" name="option1" /{amp}gt;{amp}lt;label for="option1"{amp}gt;Option 11{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 1-2" id="option2" name="option1" /{amp}gt;{amp}lt;label for="option2"{amp}gt;Option 12{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 1-3" id="option3" name="option1" /{amp}gt;{amp}lt;label for="option3"{amp}gt;Option 13{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="area2" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 2-1" id="option21" name="option2" /{amp}gt;{amp}lt;label for="option21"{amp}gt;Option 21{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 2-2" id="option22" name="option2" /{amp}gt;{amp}lt;label for="option22"{amp}gt;Option 22{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 2-3" id="option23" name="option2" /{amp}gt;{amp}lt;label for="option23"{amp}gt;Option 23{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="area3" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 3-1" id="option31" name="option3" /{amp}gt;{amp}lt;label for="option31"{amp}gt;Option 31{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 3-2" id="option32" name="option3" /{amp}gt;{amp}lt;label for="option32"{amp}gt;Option 32{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 3-3" id="option33" name="option3" /{amp}gt;{amp}lt;label for="option33"{amp}gt;Option 33{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="area4" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 4-1" id="option41" name="option4" /{amp}gt;{amp}lt;label for="option41"{amp}gt;Option 41{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 4-2" id="option42" name="option4" /{amp}gt;{amp}lt;label for="option42"{amp}gt;Option 42{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 4-3" id="option43" name="option4" /{amp}gt;{amp}lt;label for="option43"{amp}gt;Option 43{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

/ К

Так как ваниль тоже хороша, вы можете попробовать следующее

 (function () { var checkboxes = []; var areas = []; var maxInArea = null; var maxOverall = null; function init() { //initialize checkboxes and areas as well as limits checkboxes = document.querySelectorAll('input[type="checkbox"]'); areas = document.getElementsByClassName('area'); maxInArea = 2; maxOverall = 4; for (var i = 0; i {amp}lt; checkboxes.length; i  ) checkboxes[i].addEventListener('click', handleCheckboxClick, false); //add an event listener to each checkbox } function handleCheckboxClick(e) { var currentArea; var currentAreaCheckboxes; currentArea = e.target.parentElement; //get the current area... currentAreaCheckboxes = currentArea.querySelectorAll('input[type="checkbox"]'); //...to count its checked checkboxes if ((_getActiveCheckboxesInArea(currentAreaCheckboxes) {amp}gt; maxInArea) //check limits per area... || (_getActiveCheckboxesOverall() {amp}gt; maxOverall) ){ //...then overall e.target.checked = false; } } function _getActiveCheckboxesInArea(areaCheckboxes) { var count = 0; for (var i = 0; i {amp}lt; areaCheckboxes.length; i  ) if (areaCheckboxes[i].checked) count  ; return count; } function _getActiveCheckboxesOverall() { var count = 0; for (var i = 0; i {amp}lt; checkboxes.length; i  ) if (checkboxes[i].checked) count  ; return count; } init(); })(); 

Как видите, хитрость заключается в том, чтобы иметь счетчик для текущей области, определяющей родительский элемент области, когда установлен флажок. Это выглядит как длинный сценарий, но, поскольку это Vanilla, у вас больше контроля, простоты и производительности, чем при использовании jQuery, вы заметите, как только вы прочитаете его в первый раз.

Вы можете сделать это, сохранив массив всех имен для отмеченных флажков и сравнив его с последним выбранным блоком:

 const max = 2 let totals = [] const checkboxes = document.querySelectorAll('.area {amp}gt; input[type="checkbox"]') checkboxes.forEach(el ={amp}gt; { el.addEventListener("click", (e) ={amp}gt; { //check within group let within = totals.filter(name ={amp}gt; name === e.target.name) if(e.target.checked {amp}amp;{amp}amp; within.length {amp}gt;= max {amp}amp;{amp}amp; totals.indexOf(e.target.name) {amp}gt; -1){ console.log("max within group reached") e.preventDefault() return } //check all groups let without = totals.filter((name, idx, arr) ={amp}gt; arr.indexOf(name) === idx) if(e.target.checked {amp}amp;{amp}amp; without.length {amp}gt;= max {amp}amp;{amp}amp; without.indexOf(e.target.name) === -1){ console.log("max groups reached") e.preventDefault() return } if(e.target.checked){ totals.push(e.target.name) }else{ totals.splice(totals.indexOf(e.target.name),1) } }) }) 
 .c { max-width: 1200px; margin: auto; } .area { margin-bottom: 10px; ; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="c"{amp}gt; {amp}lt;div id="area1" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 1-1" id="option1" name="option1" /{amp}gt;{amp}lt;label for="option1"{amp}gt;Option 11{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 1-2" id="option2" name="option1" /{amp}gt;{amp}lt;label for="option2"{amp}gt;Option 12{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 1-3" id="option3" name="option1" /{amp}gt;{amp}lt;label for="option3"{amp}gt;Option 13{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="area2" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 2-1" id="option21" name="option2" /{amp}gt;{amp}lt;label for="option21"{amp}gt;Option 21{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 2-2" id="option22" name="option2" /{amp}gt;{amp}lt;label for="option22"{amp}gt;Option 22{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 2-3" id="option23" name="option2" /{amp}gt;{amp}lt;label for="option23"{amp}gt;Option 23{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="area3" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 3-1" id="option31" name="option3" /{amp}gt;{amp}lt;label for="option31"{amp}gt;Option 31{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 3-2" id="option32" name="option3" /{amp}gt;{amp}lt;label for="option32"{amp}gt;Option 32{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 3-3" id="option33" name="option3" /{amp}gt;{amp}lt;label for="option33"{amp}gt;Option 33{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="area4" class="area"{amp}gt; {amp}lt;input type="checkbox" value="Option 4-1" id="option41" name="option4" /{amp}gt;{amp}lt;label for="option41"{amp}gt;Option 41{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 4-2" id="option42" name="option4" /{amp}gt;{amp}lt;label for="option42"{amp}gt;Option 42{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;input type="checkbox" value="Option 4-3" id="option43" name="option4" /{amp}gt;{amp}lt;label for="option43"{amp}gt;Option 43{amp}lt;/label{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt;