vendredi 1 septembre 2023

jQuery Checkbox checked Limitation

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;
    }
});



Aucun commentaire:

Enregistrer un commentaire