after using preventDefault, why can't i check a box with jquery?

Question

How come the following code does not work. I prevent the default action on the event. Then I want to check the box anyway.

html

<input type="checkbox" class="checkbox" />

javsacript

$('.checkbox').click( function(e) {
    e.preventDefault();
    // some logic happens... now i may decide to check the box (in this case we want to check it for testing)
    $('.checkbox').prop('checked',true);
});

You would think clicking the checkbox would still check the box.. but it doesnt. Check the fiddle to see what I mean.

http://jsfiddle.net/5KDH8/

I have also tried using the attr function without any luck.

Answer 1

You have to put the code that sets the "checked" property in a separate event loop:

setTimeout(function() { $('.checkbox').prop('checked', true); }, 1);

Either the browser or the library has to un-set the checkbox after the event handler returns, because it sets it in response to the click before the handler is invoked.

Answer 2

$('.checkbox').click( function(e) {
    // do some logic that returns true or false
    if (!mylogic) {
        return false;
        // returning false will prevent the checkbox to be checked.
    }
});