jQuery .click() perform the default action before the custom function

Question

Here is my code, I have two checkboxes and want to keep one disabled until the other one is enabled:

$(function(){
    $('#remember').live('click', function(event){
        if($('#remember').is(':checked')){
            $('#keepIn').removeAttr('disabled');
        }
        else
            $('#keepIn').attr('disabled', 'disabled');
    });
});

The problem is that this function executes before the default action and when I click in the first one $('#remember').is(':checked') returns false (the old value) instead of true.

Answer 1

You can use change event instead:

$('#remember').live('change', function(event) {
    if (this.checked) {
        $('#keepIn').removeAttr('disabled');
    } else {
        $('#keepIn').attr('disabled', 'disabled');
    }
});

DEMO: http://jsfiddle.net/jP3NY/

---

NB: live method is deprecated. You should better use on or delegate .

For the newer version of jQuery the solution could be as follows:

$('body').on('change', '#remember', function(event) {
    $('#keepIn').prop('disabled', !this.checked);
});

Instead of body you can use any parent element of #remember .