jquery dynamically added checkbox .attr("checked",true) not working_问答_开发者

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>

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

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

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

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