Jquery checkbox .prop click preventDefault behaviour

Question

I have been working with many checkboxes lately. I came across this 'problem' with the .prevenDefault() click event and I tried to find a solution for this. In my case I wanted to be able to decide if a checkbox could be checked/unchecked according to other fields. Sometimes I even had to open a dialog before the event fired. This sounded easier than it turned out to be...

In this jsFiddle you can see what the problem is and how I tried to solve it (see code below as well). Most answers implied to use change instead of click. But than you can't use .preventdefault().

$('div').off('change','.wtf').on('change', '.wtf', function(e) {
    //e.preventDefault();
    //return false;
    if($(this).prop('checked') == true) {
        alert('I am true now, but I must stay false');
        $(this).prop('checked', false);
    }
    else {
        alert('I am false now, but I must stay true');
        $(this).prop('checked', true);
    }
});

Is this the best solution? Or is there any other way to make the checkbox wait untill it is allowed to change it's state?

As example: I would like the checkbox unchecked only if a user agrees with a message in a dialog by hitting 'OK'.

Spokey · Accepted Answer · 2013-04-25 11:21:17Z

14

Checkboxes are a special case where the change event and click can replace each-other since the change event is also fired by clicking on the checkbox.

That said the only big difference between click and change is the usability of .preventDefault(). The change event is better in cases where the value of the checkbox is being changed using any other methods than clicking.

In this case you choose whichever you prefer. An example would be: Fiddle here

$('input[type="checkbox"]').on('change', function () {
    var ch = $(this), c;
    if (ch.is(':checked')) {
        ch.prop('checked', false);
        c = confirm('Do you?');
        if (c) {
            ch.prop('checked', true);
        }
    } else {
        ch.prop('checked', true);
        c = confirm('Are you sure?');
        if (c) {
            ch.prop('checked', false);
        }
    }
});

answered Apr 25, 2013 at 11:21

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brainfeeder Over a year ago

Thanks for the answer. Still I find these checkboxes somewhat illogical if you compare with other form element handling...

Spokey Over a year ago

True, they are a little different since they have a value but also an on/off status (checked or not). And that makes them more tricky.

Marius Balčytis Over a year ago

Also note, that click and change events fire differently on Firefox and Chrome. Firefox: first click, then change. Chrome: first change, then click.

SaidbakR · Accepted Answer · 2017-11-26 21:17:44Z

1

I have implemented Spokey solution with some modifications based on stop the function using return if the confirm() returns true

$("input[name='status']").change(function(e){
       if ($(this).is(':checked')){
           msg = "{{__('The set status will be Active again! Are you sure?')}}"
           a = confirm(msg);
           if (a){
               return true;
           }
           $(this).prop('checked',false)
       }
       else{
           msg = "{{__('The set will be Inactive! Are you sure?')}}"
           a = confirm(msg);
            if (a){
               return true;
           }
           $(this).prop('checked',true);
       }
   })

answered Nov 26, 2017 at 21:17

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

Collectives™ on Stack Overflow

Jquery checkbox .prop click preventDefault behaviour

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related