I have 6 checkboxes in a group of food sides. Any or all of the six can be checked.
I have another group of 6 checkboxes of sauces that only one can be checked. On a specific condition, the Egg Rolls checkbox is checked, I would like to permit 2 of the checkboxes to be checked.
I have a JSFiddle HERE that shows my current code, although it does not permit 2 checkboxes to be selected if the Egg Roll checkbox is checked. I have alerts that clearly show the value of the declared variable "num" to be 2 when the Egg Roll checkbox is checked, but the function to limit the number of allowed checkboxes does not change from 1 to 2.
The HTML:
<!-- // **** Sides Table **** -->
<div>
<table>
<caption>Choose Your Sides</caption>
<tr>
<td><input type="checkbox" value="Mac 'n Cheese" name="side1" id="side1" data-price="2.50" class="item"><label for="side1">Mac 'n Cheese</label></td>
<td><input type="checkbox" value="Egg Roll" name="side2" id="side2" data-price="3.00" class="item"><label for="side2">Egg Roll</label></td>
</tr>
<tr>
<td><input type="checkbox" value="Green Beans" name="side3" id="side3" data-price="2.50" class="item"><label for="side3">Green Beans</label></td>
<td><input type="checkbox" value="Potato Salad" name="side4" id="side4" data-price="2.50" class="item"><label for="side4">Potato Salad</label></td>
</tr>
<tr>
<td><input type="checkbox" value="Seven Bean Chili" name="side5" id="side5" data-price="2.50" class="item"><label for="side5">Seven Bean Chili</label></td>
<td><input type="checkbox" value="Cole Slaw" name="side6" id="side6" data-price="1.50" class="item"><label for="side6">Cole Slaw</label></td>
</tr>
</table>
</div>
<!-- // **** Sauce Table **** -->
<div>
<table>
<caption>Choose Your Sauce</caption>
<tr>
<td><input type="checkbox" value="Cheerwine" name="sauce" id="checkbox1" class="sauce"><label for="checkbox1">Cheerwine</label></td>
<td><input type="checkbox" value="Hummer" name="sauce" id="checkbox2" class="sauce"><label for="checkbox2">Hummer</label></td>
</tr>
<tr>
<td><input type="checkbox" value="Moovelous" name="sauce" id="checkbox3" class="sauce"><label for="checkbox3">Moovelous</label></td>
<td><input type="checkbox" value="Mercy Me" name="sauce" id="checkbox4" class="sauce"><label for="checkbox4">Mercy Me</label></td>
</tr>
<tr>
<td><input type="checkbox" value="Pepper Jacked" name="sauce" id="checkbox5" class="sauce"><label for="checkbox5">Pepper Jacked</label></td>
<td><input type="checkbox" value="9mm" name="sauce" id="checkbox6" class="sauce"><label for="checkbox6">9mm</label></td>
</tr>
</table>
</div>
And the javascript code:
var last;
var num="";
num=1;
$('input:checkbox[id="side2"]').change(function () {
if($('#side2').prop('checked')) {
num=2;
alert (num);
} else {
num=1;
alert (num);
}
})
$('input:checkbox[class="sauce"]').change(function () {
if (this.checked) {
if ($('input[type="checkbox"]:checked').length > num) {
$(last).prop('checked', false);
}
last = this;
}
});
3
Answers
Thanks to the answers provided I was able to make it work. Swati had a working example, except clicking an alternate sauce choice was not permitted. Using some of the existing code I had and merging it with Swatti's answer provided this [JSFiddle][1]. which functions exactly as I had hoped.
The problem is that
$('input[type="checkbox"]:checked').length
is returning a length of 2: The total number of boxes checked. So one for egg roll, one for one sauce, and then when you select another sauce, it thinks you’ve already hit your limit of 2. You should increase the limit to account for the checkbox that you’ve already selected.I changed the code of your
.change
function to this and it seems to work now:You can check if the length of checked checkboxes length is
>= 2
or> 2
depending on if the#side2
checkbox or not and then remove the checked attribute from current checked checkbox.Demo Code :