lundi 14 août 2017

How to disabled all unchecked checkboxes using each loop jquery

I've tried looking through various other solutions but none seem to work for me, so I'm posting this.

I have a booking calendar on a Wordpress site which allows users to select 1 hour long slots at a horse arena, and depending on their role (they have to be logged in to use it) the amount of hours is restricted. For example, three, four or eight hours. What I am trying to do is count up the number of checkboxes checked dynamically and then, when it reaches the allowed limit, it disables all other checkboxes UNTIL they decide to uncheck an existing checked one.

Here's my code:

$('.booking_font_cuprum').click(function(){
    var checked = $("input:checked").length;
    if( checked >= <?php echo $allowed_hours ?>) {
        $("input").each( function() {
            if($(this).not(':checked')) {
                $(this).attr('disabled', 'disabled');
            }
        });
    } else {
        console.log("keep checking...");
    }
});

$allowed_hours is already stipulated in PHP above this, based on the user role (and it works). Basically what happens is that EVERY checkbox is disabled, and therefore the user cannot uncheck what they have already chosen. I thought that using the :not selector would only disabled unchecked, but maybe I'm implementing this incorrectly? I'd also need to re-enable all other checkboxes once one is unchecked, to allow the user to change their selection.




Aucun commentaire:

Enregistrer un commentaire