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'.

Solution 1

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);
        }
    }
});

Solution 2

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);
       }
   })