jQuery checking and unchecking checkboxes

Question

I have to check and uncheck the checkboxes. But it is not working well.

Example: When the status is active on the 1st load:

• Unchecking the checkboxes into inactive (Works fine)
• Checking it back again to make it active (Not working, stays uncheck)

Example: WHen the status is inactive on the 1st load:

• Checking the checkboxes into active (Works fine)
• Unchecking the checkboxes into inactive (Works fine)
• Checking it back again to make it active (Not working, stays uncheck)

Here is my sample code:

var statusCheck = $('.status-box');

$.ajax({
    url: 'sample/url',
    type: 'POST',
    data: {
        user_id: ids,
        status: statusVal
    },
    success: function (response) {
        if (response == 'ok') {
            $.each(statusCheck, function () {
                var _this = $(this);

                if (_this.is(':checked')) {
                    _this.removeAttr('checked');
                } else {
                    _this.attr('checked', '');
                }
            });
        }
    }
});

Answer 1

I had problems (strange anomalies) with checking and unchecking checkboxes with JQuery. I was using .attr and .removeAttr and when I changed it to .prop('checked',false/true) I resolved the problem.

Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes. Reference:

Note you should be using JQuery 1.6 +.

Answer 2

var statusCheck = $('.status-box')

$.ajax({
        url     : 'sample/url',
        type    : 'POST',
        data    : { user_id: ids, status: statusVal },
        success : function( response ) {
            if( response == 'ok' ) {
                $.each(statusCheck, function(){
                    var _this    = $(this);

                    if( _this.is(':checked') ) {
                        _this.removeAttr('checked');
                    } else {
                        _this.attr('checked', 'checked');
                             // ...............^ here ^
                    }
                });
            }
        }
    });

Try this: _this.attr('checked', 'checked');

Also .prop() from this Link might do the magic ;)