jQuery/Javascript: Click event on a checkbox and the 'checked' attribute

Question

The code:

$('input.media-checkbox').live('click', function(e){

    e.preventDefault();
    var that = $(this);

    if (that.attr('checked') == 'checked'){

        var m = that.attr('media');
        var mid = 'verify_' + m;
        that.parents('div.state-container').find('ul.' + mid).remove();
        that.attr('checked', false);
    } else {

        var url = AJAX_URL;

        $.ajax({
           type: 'GET',
           url: url,
           dataType: 'html',
           success: function(data){

                that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
                that.attr('checked', 'checked');
           }
        }); 
    }

    return false;
});

I am ajaxing in a form, then firing the click event on relevant checkboxes to ajax in another partial if necessary. The form is inserted nicely, and the click events are fired, checking the boxes that need to be checked and firing the second ajax, since the checked attribute of the checkbox was initially false.

What's curdling my cheese is if I UNCHECK one of those boxes. Despite e.preventDefault(), the checked attribute is set to false BEFORE the test, so the if statement always executes the else statement. I've also tried this with $.is(':checked'), so I'm completely baffled.

It appears that unchecked -> checked state reads the original state, but checked -> unchecked doesn't. Any help?

did you try return false; instead of e.preventDefault? Also, did you use function(e) { e = e || event; ... } ? — Jacob Relkin
– Jacob Relkin, Commented May 7, 2010 at 4:37
return false, yes - it's at the end of the code. Should it be inside the if closure? I'm not familiar with the second bit of code ... what's it for? — b. e. hollenbeck
– b. e. hollenbeck, Commented May 7, 2010 at 4:42
the second bit is checking if e is non-null, if not it assigns to the global event variable. — Jacob Relkin
– Jacob Relkin, Commented May 7, 2010 at 4:44
@Jacob Relkin - e = e || event is unnecessary in jQuery, it normalizes the event object for you. — gnarf
– gnarf, Commented May 8, 2010 at 5:20

A.Wack · Accepted Answer · 2012-04-16 17:49:16Z

15

B.E., I know it has been a year but I think I found the solution,

The issue here is that the click event actually get's called and runs BEFORE the "checked" property is added to the checkbox input. So the function runs, looks to see if the input has the "checked" attribute, and runs the else condition. THEN the element is given the "checked" property.

I just ran into this as well, and my solution was to bind the function to the change function rather than the click function, as change only fires AFTER the checked property has been updated on the input.

Hopefully this help you, and if not, anyone else who happens to stumble upon this post while experiencing a similar issue.

answered Apr 16, 2012 at 17:49

A.Wack

4781 gold badge4 silver badges9 bronze badges

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

1 Comment

b. e. hollenbeck Over a year ago

Tested against the original project (still in production, with a workaround) - and it works. Kudos!

artlung · Accepted Answer · 2010-05-07 04:56:48Z

2

Well, right. You have set the live event, so I think your script might also be responding to setting it as checked, but I can't totally tell what you're trying for here without seeing markup, but here's my rewrite.

$('input.media-checkbox').live('click', function(e){

    if ($(this).is(':checked')) {
        var m = $(this).attr('media');
        var mid = 'verify_' + m;
        $(this).parents('div.state-container')
            .find('ul.' + mid)
            .remove();
        $(this).attr('checked', false);
    } else {
        var url = AJAX_URL;
        var that = this;
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function(data) {
                $(that).parents('li')
                    .siblings('li.verification')
                    .children('div.media-verification')
                    .append(data)
                    .fadeIn(500);
                $(that).attr('checked', true);
            }
        }); 
    }
    return false;

});

edited May 7, 2010 at 4:56

answered May 7, 2010 at 4:44

artlung

33.5k19 gold badges76 silver badges124 bronze badges

1 Comment

b. e. hollenbeck Over a year ago

I need the .live event handler, since the form in question isn't in the document when it's loaded - it's ajax'd in afterwards. Setting a straight .bind won't work.

Ajaxe · Accepted Answer · 2010-05-11 22:36:21Z

1

Try using e.stopPropagation() instead of e.preventDefault() and also remove return false. Returning false in jQuery is equivalent to e.stopPropagation() + e.preventDefault(). e.preventDefault() prevents the checkbox from being checked.

answered May 11, 2010 at 22:36

Ajaxe

6471 gold badge5 silver badges16 bronze badges

Comments

karim79 · Accepted Answer · 2010-05-07 04:57:16Z

0

It seems to be a due to asynchronous requests. The execution goes past $.ajax, before it's success callback fires. When you click the checkbox again, it's state has not yet been updated by the previous request's callback. What you can try is to disable the checkbox control prior to firing the ajax call, and enable it again within the success callback:

that.attr("disabled", "disabled");
var url = AJAX_URL;   
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'html',
    success: function(data){

        that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
        that.attr('checked', 'checked');
        that.removeAttr('disabled');
    }
});

That will ensure that two successive clicks will not lead to unpredictable behaviour. The other way would be to use a synchronous request, i.e. async: false but that will block the entire browser for it's duration.

answered May 7, 2010 at 4:57

karim79

343k67 gold badges420 silver badges409 bronze badges

1 Comment

b. e. hollenbeck Over a year ago

I like this - but no. The checkbox being toggled is already in the DOM - this ajax call (for a second request) is made after the test for :checked, so the success of the ajax request doesn't affect the state of the checkbox. Check a checkbox, and jQuery reads in the correct starting state of the checkbox - uncheck it, and it clears the box BEFORE firing the click event handler. It's bizarre.

hetu · Accepted Answer · 2010-05-12 07:43:10Z

0

I think it's due to a weird bug in IE. Check/set attribute defaultChecked along with checked. Try this in your if condition,

if (that.attr('checked')=='checked' || that.attr("defaultChecked")=='checked'){     
      var m = that.attr('media');  
      var mid = 'verify_' + m;
      that.parents('div.state-container').find('ul.' + mid).remove();
      that.attr('checked', false);
      that.attr('defaultChecked', false); 
} else {

answered May 12, 2010 at 7:43

hetu

261 bronze badge

Comments

mVChr · Accepted Answer · 2010-05-14 20:09:21Z

0

This is probably only a partial answer, but in your test, $(this).attr('checked') should return true if checked and false if not. So just change your conditional to if (that.attr('checked'))

edited May 14, 2010 at 20:09

answered May 14, 2010 at 20:01

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Collectives™ on Stack Overflow

jQuery/Javascript: Click event on a checkbox and the 'checked' attribute

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related