jQuery versioning bug with checkboxes

Question

this simple piece of code works perfectly in jquery 1.8.3 however > jquery 1.8.3 it stops working. What am I doing wrong?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#button').click(function(){
        if($("#stc").is(':checked'))
        {
            $("#stc").attr('checked', false);
            //do some code
        }
        else
        {
            $("#stc").attr('checked', true);
            //do some other code
            //so no toggle() I believe
        }
    });
});
</script>
</head>
<body>
<button id="button">(de)select</button>
<input type="checkbox" id="stc">
</body>
</html>

try for yourself with 1.8.3:

score 3 · Accepted Answer · answered Mar 05 '15 at 07:34

3

Use this prop()

  if($("#stc").is(':checked')) {
            $(this).prop('checked', false);
            //do some code
        } else {
            $(this).prop('checked', true);           
        }

answered Mar 05 '15 at 07:34

I'm Geeker

4,601
5
22
41

score 2 · Answer 2 · answered Mar 05 '15 at 07:35

Try this

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#button').click(function(){
        if($("#stc").is(':checked'))
        {
            $("#stc").prop('checked', false);
            //do some code
        }
        else
        {
            $("#stc").prop('checked', true);
            //do some other code
            //so no toggle() I believe
        }
    });
});
</script>
</head>
<body>
<button id="button">(de)select</button>
<input type="checkbox" id="stc">
</body>
</html>

Jai · Answer 3 · 2015-03-05T07:46:31.247

What am I doing wrong?

From the docs of .attr():

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

Attributes vs. Properties
The difference between attributes and properties can be important in specific situations. 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.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

I suggest you to use .prop() instead, you don't require to use any if/else condition. You just have to check the checked property of the checkbox:

    $(document).ready(function() {
      $('#button').click(function() {
        $("#stc").prop('checked', !$("#stc")[0].checked);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">(de)select</button>
<input type="checkbox" id="stc">

score 1 · Answer 4 · answered Mar 05 '15 at 07:32

Instead of

$("#stc").attr('checked', false);

Use .prop()

$("#stc").prop('checked', false);

Complete Code :-

$(document).ready(function() {
    $('#button').click(function(){
        if($("#stc").is(':checked'))
        {
            $("#stc").prop('checked', false);//Or $("#stc").removeAttr('checked');
            //do some code
        }
        else
        {
            $("#stc").prop('checked', true);//Or $("#stc").attr('checked','checked');
            //do some other code
            //so no toggle() I believe
        }
    });
});

jQuery versioning bug with checkboxes

4 Answers4