Добрый день. Есть 2 группы чекбокс.
<input id="my_check" type="checkbox" name="color"/>
<label for="my_check">Space Gray</label>
<input id="my_checka" type="checkbox" name="color"/>
<label for="my_checka">Gold</label>
<input id="my_checkb" type="checkbox" name="color"/>
<label for="my_checkb">Dilver</label>
<input id="my_checkc" type="checkbox" name="color"/>
<label for="my_checkc">Pink</label>
<input id="gb" type="checkbox" name="gb"/>
<label for="gb">16 GB</label>
<input id="gb1" type="checkbox" name="gb"/>
<label for="gb1">64 GB</label>
<input id="gb2" type="checkbox" name="gb"/>
<label for="gb2">128 GB</label>
Надо сделать так, чтобы при выборе в первой группе 2 значений, все остальные в этой группе блокировались. Тоже самое для другой группы. У меня получился вот такой код:
<script>
var f = document.forms.Form;
f.onchange = function() {
var n = f.querySelectorAll('[type="checkbox"]'),
l = f.querySelectorAll('[type="checkbox"]:checked');
for(var j=0; j<n.length; j++)
if (l.length >= 2) { // если отметить 2 и более галочки
n[j].disabled = true; // все чекбоксы становятся disabled
for(var i=0; i<l.length; i++)
l[i].disabled = false; // но disabled убирается с помеченных галочками чекбоксов
} else {
n[j].disabled = false; // если выделить менее трёх галочек, то disabled снимается со всех чекбоксов
}
}
</script>
Но он блокирует все чекбоксы во всех группах. Как сделать корректно?