Question

根据一些数据，我正在用一个复选框克隆一个div，如果数据值是“True”则检查它，然后追加到目标div。

使用jquery 1.5.2

IE8在兼容模式下工作，否则无效。 FF不起作用。

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

Answer 1

尝试这一点，似乎使用.attr("checked", "checked")不会影响html，请尝试使用直接javascript方法setAttribute和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();
});

另请注意，由于您始终使用theClone，因此需要使用removeAttribute，因为上一次迭代修改了元素。

Code example on jsfiddle

<强>更新

如果您直接处理jQuery对象，它将在IE9，chrome，FF和IE兼容模式下运行。

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

Answer 2

代替.attr，使用.prop jquery方法（包含在jquery1.6中）。以下是详细讨论link。

Answer 3

属性checked的值不是“true”，而是需要checked。这符合XHTML标准，您的页面doctype可能设置为。

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

jQuery的：

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

作为旁注，您可能需要查看并重构您的JSON。根据经验，只要你有一个布尔测试，并且你的一个参数是一个布尔本身，你需要重构。

编辑：此问题是由浏览器.innerHTML的不同实现引起的。您还有一个问题，即您只将克隆源设置为true而从不相反，因此一旦将一个复选框设置为true，它们都将成为（这是其他已发布答案中的问题）。你需要重构这样的事情：

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

警告：执行这样的重复附加会比大型集合产生性能问题。如果它超过两个，则进一步重构。：）

Answer 4

对我来说，使用.attr正在使用chrome而不是IE，而.prop似乎也有同样的问题。

最后我不情愿地选择了物理点击选项......

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

jquery动态添加复选框.attr（“checked”，true）不起作用

4 个答案: