Advertisements
I have a 5 checkboxes
, Where all of them were checked.
The maximum 2 should be unchecked
, with all the 3 checked.
<div id="excludedNumbers">
<div class="form-group">
<div class=" form-check">
<input class="form-check-input" checked type="checkbox" value="0" id="add0">
<label class="form-check-label" for="add0">0</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="1" id="add1">
<label class="form-check-label" for="add1">1</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="2" id="add2">
<label class="form-check-label" for="add2">2</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="3" id="add3">
<label class="form-check-label" for="add3">3</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="4" id="add4">
<label class="form-check-label" for="add4">4</label>
</div>
<div class="form-check">
<input class="form-check-input" checked type="checkbox" value="5" id="add5">
<label class="form-check-label" for="add5">5</label>
</div>
I need to set an alert, if the user unchecks more than 2 digits.
var checkBoxesEnabled =document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
checkBoxesEnabled[i].addEventListener('click', function () {
var uncheckedcount = 0;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
if(checkBoxesEnabled[i].checked === false > limit){
alert('You cannot disable more than 2');
}
}
});
}
It didnt work, not sure what was wrong
How could I get the alert, if more than 2 checkboxes were unchecked?
could someone please help?
>Solution :
You need to increase the counter each time you find a checked checkbox and then compare it with the value of the limit variable. Raise an alert if the limit is crossed.
var checkBoxesEnabled =document.querySelectorAll('.form-check-input');
var limit = 2;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
checkBoxesEnabled[i].addEventListener('click', function () {
var uncheckedcount = 0;
for (var i = 0; i < checkBoxesEnabled.length; i++) {
if(checkBoxesEnabled[i].checked === false) uncheckedcount++;
if (limit < uncheckedcount) {
alert('You cannot disable more than 2');
break;
}
}
});
}