dimanche 21 mars 2021

Blocking a series of checkboxes with Jquery

I have a web page that can contain several series of checkboxes. I want to limit the number of possible checkboxes for each of these series. PS: Some checkboxes can already be checked when the page is loaded depending on what the user has clicked during his previous visits.

Currently, the code I have is not efficient because it takes all the checkboxes of the whole page and on top of that, it acts only after checking a checkbox. This means that the user can select more and more checkboxes.

As you can see in the code, there can be multiple form, so multiple row of checkbox, each one is independ from the other one.

Thanks for your purpose !

<form id="<?php echo $id_apps; ?>_form">
                <span class="nav-link-inner--text"> APP1:
                <label class="custom-toggle">
                    <input type="checkbox" id="<?php echo $id_apps; ?>_checkbox_APP1" <?php if($APP1_choice == "yes") { echo 'checked';}?> >
                    <span class="custom-toggle-slider rounded-circle" label="APP1" data-label-off="No" data-label-on="Yes"></span>
                </label>
                </span><br>
                <span class="nav-link-inner--text"> APP2:
                    <label class="custom-toggle">
                        <input type="checkbox" id="<?php echo $id_apps; ?>_checkbox_APP2" <?php if($APP2_choice == "yes") { echo 'checked';}?> >
                        <span class="custom-toggle-slider rounded-circle" label="APP2" data-label-off="No" data-label-on="Yes"></span>
                    </label>
                </span><br>
...
....

...

// Same thing with another id_apps

<form id="<?php echo $id_apps; ?>_form">
                <span class="nav-link-inner--text"> APP1:
                <label class="custom-toggle">
                    <input type="checkbox" id="<?php echo $id_apps; ?>_checkbox_APP1" <?php if($APP1_choice == "yes") { echo 'checked';}?> >
                    <span class="custom-toggle-slider rounded-circle" label="APP1" data-label-off="No" data-label-on="Yes"></span>
                </label>
                </span><br>
                <span class="nav-link-inner--text"> APP2:
                    <label class="custom-toggle">
                        <input type="checkbox" id="<?php echo $id_apps; ?>_checkbox_APP2" <?php if($APP2_choice == "yes") { echo 'checked';}?> >
                        <span class="custom-toggle-slider rounded-circle" label="APP2" data-label-off="No" data-label-on="Yes"></span>
                    </label>
                </span><br>
...
....

<script>


var max_limit = "<?php echo $nbr_apps; ?>"; // This is the limit of checkbox that comes from php, each form comes with a limit
$(document).ready(function (){
    $("input:checkbox").click(function() {
    var bol = $("input:checkbox:checked").length >= max_limit;     
    $("input:checkbox").not(":checked").attr("disabled",bol);
    });
});
</script>



Aucun commentaire:

Enregistrer un commentaire