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

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

使用jquery 1.5.2

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

     $(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); });    
 
 
  
 
 
   

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因为上一次迭代修改了元素。

关于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); }); 

关于jsfiddle的代码示例

Answer 2

代替.attr ，使用.prop jquery方法（包含在jquery1.6中 ）。这里有详细的讨论链接 。

Answer 3

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

jQuery的：

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

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

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

警告：执行此类重复附加将导致大型集合的性能问题。 如果它超过两个，则进一步重构。 🙂

Answer 4

对我来说，使用.attr工作在chrome但不在IE中，而.prop似乎有同样的问题。

最后我不情愿的是实际点击选项……

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