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 ;]

dmuun
– dmuun

2011-04-06 17:42:56 +00:00
Commented Apr 6, 2011 at 17:42 — dmuun
– dmuun, Commented Apr 6, 2011 at 17:42

Mark Coleman · Accepted Answer · 2011-04-06 17:55:39Z

4

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

edited Apr 6, 2011 at 17:55

answered Apr 6, 2011 at 17:36

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

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

3 Comments

dmuun Over a year ago

this works in IE8 and FF. But not in IE8 compatibility mode, all checkboxes get checked. So weird!

Mark Coleman Over a year ago

@user331884 see update, adjusted to use just jQuery objects instead of html() appears to work in IE, FF, Chrome, and Compatibility mode.

saulyasar Over a year ago

instead of '.attr' you can use '.prop' that one more effective way link

Community · Accepted Answer · 2017-05-23 12:07:37Z

4

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

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Aug 22, 2013 at 15:17

Anshul

9,51011 gold badges62 silver badges76 bronze badges

Comments

Adam Terlson · Accepted Answer · 2011-04-06 18:04:57Z

2

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. :)

edited Apr 6, 2011 at 18:04

answered Apr 6, 2011 at 17:29

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

1 Comment

dmuun Over a year ago

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.

Fetchez la vache · Accepted Answer · 2015-06-03 10:09:34Z

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 3, 2015 at 10:09

Fetchez la vache

5,3105 gold badges38 silver badges57 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related