jquery 动态添加复选框 .attr("checked",true) 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5570455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery dynamically added checkbox .attr("checked",true) not working
提问by dm80
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.
根据一些数据，我使用复选框克隆一个 div，并检查它是否数据值为“True”，然后附加到目标 div。
using jquery 1.5.2
使用 jquery 1.5.2
IE8 works in compatibility mode, doesn't work otherwise. FF doesn't work.
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>
采纳答案by Mark Coleman
Try this out, it appears that using .attr("checked", "checked")does not effect the html, try using the direct javascript method setAttributeand removeAttribute
试试这个，似乎使用.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();
});
Also notice since you are always working with theCloneyou need to use removeAttributesince the previous iteration modified the element.
另请注意，因为您一直在使用theClone您需要使用removeAttribute的元素，因为上次迭代修改了该元素。
Update
更新
If you deal directly with jQuery objects it appears it will work in IE9, chrome, FF, and IE compatibility mode.
如果您直接处理 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);
});
回答by Anshul
In place of .attr, use .propjquery method (included in jquery1.6).Here is detailed discussion link.
代替.attr，使用.propjquery 方法（包含在jquery1.6 中）。这里是详细讨论链接。
回答by Adam Terlson
The attribute checkeddoesn't have a value of "true", and instead needs to be checkedas well. Such is in accordance with the XHTML standard, which your page doctype is probably set to.
该属性checked没有“true”的值，而是需要checked也是如此。这符合 XHTML 标准，您的页面文档类型可能设置为该标准。
<input type="checkbox" checked="checked" />
jQuery:
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.
作为旁注，您可能想在那里查看并重构您的 JSON。根据经验，每当您进行布尔测试并且其中一个参数是布尔值本身时，您都需要重构。
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:
编辑：此问题是由.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>
WARNING: doing duplicate appends like this will have performance issues over large collections. If it's more than two, refactor further. :)
警告：像这样进行重复追加会对大型集合产生性能问题。如果超过两个，则进一步重构。:)
回答by Fetchez la vache
For me, using .attr was working in chrome but not in IE, and .prop seemed to have the same issue.
对我来说，使用 .attr 可以在 chrome 中工作，但不能在 IE 中使用，而 .prop 似乎也有同样的问题。
What I begrudgingly went with in the end was to physically click the option...
最后我不情愿地选择了物理单击该选项......
$('#RadioButtonIdToSelect').click();
