skip to Main Content

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


  1. Chosen as BEST ANSWER

    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.

    <!-- // **** 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>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    var last;
    
    $('input:checkbox[id="side2"]').change(function () {
    if($('#side2').prop('checked')) {
    $('.sauce').prop("checked", false);
    } else {
    $('.sauce').prop("checked", false);
    }
    })
    
    $('input:checkbox[class="sauce"]').change(function() {
      var length = $('[name=sauce]:checked').length;
      var is_checked = $('#side2').prop('checked'); //for Egg Roll
      if ((length >= 2 && !is_checked) || (is_checked && length > 2)) {
    //    $(this).prop('checked', false);
                $(last).prop('checked', false);
      }
      last=this;
    });
      [1]: https://jsfiddle.net/tx4udrpj/
    

  2. 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:

    $('input:checkbox[class="sauce"]').change(function () {
    if (this.checked) {
            if ($('input[type="checkbox"]:checked').length > (num + 1))                 {   
                $(last).prop('checked', false);
            }
            last = this;
        }
    });
    
    Login or Signup to reply.
  3. 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 :

    $('input:checkbox[class="sauce"]').change(function() {
      var length = $('[name=sauce]:checked').length;
      var is_checked = $('#side2').prop('checked'); //for Egg Roll
      if ((length >= 2 && !is_checked) || (is_checked && length > 2)) {
        $(this).prop('checked', false);
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- // **** 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search