How to limit checkboxes

Question

Im using a third party plugin called RestroPress to create an online menu. It allows me to create additional items that can be purchased on adding a main item to the menu. This is via a form that loads within a pop-up, although I would like to limit the amount of items they can add, ie The 'Choice of noodle' would only allow one option to be checked and 'Choice of Flavours' would only allow 5 options to be checked.

Unfortunately Im working with the below code and all solutions I have found dont apply to this layout of checkbox/input... Is there a way I can do this via JS or jQuery?

Website link here: order.miss-china

    <form>
<h6>Choice of Noodle</h6>
<div><label for="fat-rice-noodle"><input name="Fat Rice Noodle" type="checkbox" value="58|1||checkbox" data-type="checkbox" />Fat Rice Noodle</label></div>
<div><label for="thin-rice-noodle"><input name="Thin Rice Noodle" type="checkbox" value="57|1||checkbox" data-type="checkbox" />Thin Rice Noodle</label></div>
<div><label for="egg-noodle-contains-gluten"><input name="Egg Noodle (Contains gluten)" type="checkbox" value="56|1||checkbox" data-type="checkbox" />Egg Noodle (Contains gluten)</label></div>

<h6>Choice of Flavours</h6>
<div><label for="fish-choice-of-flavours"><input name="Fish" type="checkbox" value="66|1||checkbox" data-type="checkbox" />Fish</label></div>
<div><label for="beef-choice-of-flavours"><input name="Beef" type="checkbox" value="63|1||checkbox" data-type="checkbox" />Beef</label></div>
<div><label for="prawn-wontons-contains-gluten"><input name="Prawn Wontons (Contains gluten)" type="checkbox" value="60|1||checkbox" data-type="checkbox" />Prawn Wontons (Contains gluten)</label></div>
<div><label for="prawns-choice-of-flavours"><input name="Prawns" type="checkbox" value="65|1||checkbox" data-type="checkbox" />Prawns</label></div>
<div><label for="sliced-bbq-pork-choice-of-flavours"><input name="Sliced BBQ Pork" type="checkbox" value="62|1||checkbox" data-type="checkbox" />Sliced BBQ Pork</label></div>
<div><label for="chicken-choice-of-flavours"><input name="Chicken" type="checkbox" value="64|1||checkbox" data-type="checkbox" />Chicken</label></div>
<div><label for="chicken-dumplings-contains-gluten"><input name="Chicken Dumplings (Contains gluten)" type="checkbox" value="61|1||checkbox" data-type="checkbox" />Chicken Dumplings (Contains gluten)</label>

</div>
</form>

Can you change the html, or add data attributes/classes to your checkboxes ? — Lapskaus, Jun 15 '20 at 09:52
Not with out editing the plugin, which I am trying to avoid... — Jason Ryan, Jun 25 '20 at 01:23

score 0 · Answer 1 · answered Jun 15 '20 at 06:44

0

The way I think this can be done is by having a function for each separate section, you can then use a isChecked boolean to see which checkbox is checked, then add count such as checkedBoxes so that you can see how many boxes are checked.

by doing this you are then able to control the isChecked boolean to enable and disable the other check boxes in the section.

So perhaps you can find a tutorial about enabling and disabling check boxes on YouTube.

answered Jun 15 '20 at 06:44

Designs By Cornelius

3
3

I would start with this article https://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery?rq=1 – Designs By Cornelius Jun 15 '20 at 06:46
Once you know how to set the checked property/value of the check box then you will be able to create a function to control multiple check boxes – Designs By Cornelius Jun 15 '20 at 06:47
also as mentioned @ranjit-singh you can use the function with the isChecked boolean to hide the other check boxes – Designs By Cornelius Jun 15 '20 at 06:49

Harsh kurra · Answer 2 · 2020-06-15T07:22:33.247

I guess This is what you are looking for

Code to stop more than one noodles Checkbox selection, You can execute this script on your main page Loaded because I am attaching checkbox listeners at runtime. Why I am doing this at runtime? I am assuming these checkboxes are coming from the third party plugin RestroPress.

jQuery(document).on('DOMNodeInserted', function(e) {
    if (jQuery(e.target).hasClass('view-food-item-wrap')) {
        window.noodlesSelectionCount = 0;

        jQuery("#fooditem-details input").on("change", function(event) {
            console.log(event.currentTarget.getAttribute("id"));
            if (event.currentTarget.getAttribute("id").includes("noodle")) {
                if (this.checked) {
                    window.noodlesSelectionCount = window.noodlesSelectionCount + 1
                } else {
                    window.noodlesSelectionCount = window.noodlesSelectionCount - 1
                }
                if (this.checked && window.noodlesSelectionCount > 1) {
                    window.noodlesSelectionCount = window.noodlesSelectionCount - 1
                    event.originalEvent.preventDefault();
                    event.originalEvent.stopPropagation();
                    event.currentTarget.checked = false;
                }
            }
        })
    }
});

score 0 · Answer 3 · answered Jun 15 '20 at 10:19

If you are able to change the HTML and add a wrapper around your corrosponding checkboxes, you could do it like this:

$('.limited-checks').on('click', function() {
  let $container = $(this).closest('.container');
  let maxChecks = $container.data('max-checks');
  let checked = $container.find('.limited-checks:checked');
  if(checked.length > maxChecks) {
   alert( "You can choose only " + maxChecks + " option(s) in this section." );
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<h6>Choice of Noodle (max 1)</h6>
<div class="container" data-max-checks="1">
<div><label for="fat-rice-noodle"><input name="Fat Rice Noodle" type="checkbox" value="58|1||checkbox" data-type="checkbox" class="limited-checks"/>Fat Rice Noodle</label></div>
<div><label for="thin-rice-noodle"><input name="Thin Rice Noodle" type="checkbox" value="57|1||checkbox" data-type="checkbox" class="limited-checks"/>Thin Rice Noodle</label></div>
<div><label for="egg-noodle-contains-gluten"><input name="Egg Noodle (Contains gluten)" type="checkbox" value="56|1||checkbox" data-type="checkbox" class="limited-checks"/>Egg Noodle (Contains gluten)</label></div>
</div>

</form>

If you are not able to alter the HTML it gets a bit messy, the selection of the right checkboxes is alot harder, and you would need to find another way to tell each section, how many checkboxes are allowed to be checked

How to limit checkboxes

3 Answers3