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…

Accepted Answer

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

Jquery checkbox .prop click preventDefault behaviour

Solution

Problem