jquery dynamically added checkbox .attr("checked",true) not working

Question

Based on some data I'm cloning a div with a checkbox and check it if the data value is "True" then append to a target div.

using jquery 1.5.2

IE8 works in compatibility mode, doesn't work otherwise. FF doesn't work.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {          
            // test data
            var data = [{ "CB": "True" }, { "CB": "False"}];

            var theClone = $("#clone").clone(true);
            var temp = "";

            if (data !== null) {
                $.each(data, function (i, d) {
                    var cb = theClone.find('.cbClass');

                    if (d.CB === "True") { 
                        //cb.attr("checked","checked"); //doesn't work
                        //cb.val(true); //doesn't work
                        //cb.attr("checked", true); //doesn't work

                    }

                    temp += theClone.html();
                });
            }
            $("#target").append(temp);    
        });
    </script>
</head>
<body>
<div id="target">
    <div id="clone" class="cloneClass" style="display:none">
    <div class="container">
        <input type="checkbox" class="cbClass" />
    </div>
</div>
</div>

</body>
</html>

sorry about the changes wanted to make sure i was clear ;] – dm80 Apr 06 '11 at 17:42 — dm80, Apr 06 '11 at 17:42

score 4 · Answer 1 · edited May 23 '17 at 12:07

4

In place of .attr, use .prop jquery method (included in jquery1.6).Here is detailed discussion link.

edited May 23 '17 at 12:07

Community

1
1

answered Aug 22 '13 at 15:17

Anshul

9,312
11
57
74

Mark Coleman · Accepted Answer · 2011-04-06T17:55:39.507

Try this out, it appears that using .attr("checked", "checked") does not effect the html, try using the direct javascript method setAttribute and removeAttribute

$.each(data, function(i, d) {
    var cb = theClone.find('.cbClass');
    if (d.CB === "True") {
        cb.get()[0].setAttribute("checked", "checked");
    }
    else{
         cb.get()[0].removeAttribute("checked");
    }
    temp += theClone.html();
});

Also notice since you are always working with theClone you need to use removeAttribute since the previous iteration modified the element.

Code example on jsfiddle

Update

If you deal directly with jQuery objects it appears it will work in IE9, chrome, FF, and IE compatibility mode.

var temp = [];

if (data !== null) {
    $.each(data, function(i, d) {
        var theClone = $("#clone div").clone(true);
        var cb = theClone.find('.cbClass');
        if (d.CB === "True") {
            cb.attr("checked", "checked");
        }
        temp.push(theClone);
    });
}

$.each(temp, function(i, item) {
    $("body").append(item);
});

Code example on jsfiddle

this works in IE8 and FF. But not in IE8 compatibility mode, all checkboxes get checked. So weird! — dm80, Apr 06 '11 at 17:47
@user331884 see update, adjusted to use just jQuery objects instead of `html()` appears to work in IE, FF, Chrome, and Compatibility mode. — Mark Coleman, Apr 06 '11 at 17:57
instead of '.attr' you can use '.prop' that one more effective way [link](http://api.jquery.com/prop/) — saulyasar, Apr 27 '16 at 08:43

Adam Terlson · Answer 3 · 2011-04-06T18:04:57.237

The attribute checked doesn't have a value of "true", and instead needs to be checked as well. Such is in accordance with the XHTML standard, which your page doctype is probably set to.

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

jQuery:

$('.foo').attr('checked', 'checked');
$('.foo').removeAttr('checked')

As a side note, you might want to take a look at and refactor your JSON there. As a rule of thumb as well, whenever you've got a boolean test and one of your params is a boolean itself, you need to refactor.

Edit: This issue is caused by the differing implementations by browser of .innerHTML. You have a further issue where you're only setting the clone source to true and never the opposite, thus once one checkbox is set to true, they all will be (which is the issue in the other posted answer). You need to refactor to something like this:

 <script type="text/javascript">
        $(function () {          
            // test data
            var data = [{ "CB": "True" }, { "CB": "False"}];

            var temp = "";
            if (data !== null) {
                $.each(data, function (i, d) {
                    var theClone = $("#clone").clone(true);
                    var cb = theClone.find('.cbClass');
                    if (d.CB === "True") { 
                        theClone.find('input').attr("checked","checked"); 
                    }
                    $("#target").append(theClone);  
                });
            }

        });
    </script>

WARNING: doing duplicate appends like this will have performance issues over large collections. If it's more than two, refactor further. :)

I hear you on the JSON data but it's what I'm stuck working with. They're string literals "True"/"False". Back to .attr('checked','checked') it's not working for me in IE8 or FF. But works in IE8 compatibility mode. — dm80, Apr 06 '11 at 17:41

score 0 · Answer 4 · answered Jun 03 '15 at 10:09

0

For me, using .attr was working in chrome but not in IE, and .prop seemed to have the same issue.

What I begrudgingly went with in the end was to physically click the option...

$('#RadioButtonIdToSelect').click();

answered Jun 03 '15 at 10:09

Fetchez la vache

4,940
4
36
55

jquery dynamically added checkbox .attr("checked",true) not working

4 Answers4

Linked