jQuery动态添加的复选框.attr("checked"，true)不起作用 [英] jquery dynamically added checkbox .attr("checked",true) not working
问题描述
基于某些数据，我正在使用复选框克隆div，然后检查数据值是否为"True"，然后将其附加到目标div.
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.
使用jquery 1.5.2
using jquery 1.5.2
IE8在兼容模式下工作，否则无法工作. FF不起作用.
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>
推荐答案
尝试一下，看来使用.attr("checked", "checked")不会影响html，请尝试使用直接javascript方法setAttribute和removeAttribute
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();
});
还请注意，由于您始终使用theClone，因此您需要使用removeAttribute，因为上一次迭代修改了元素.
Also notice since you are always working with theClone you need to use removeAttribute since the previous iteration modified the element.
更新
如果直接处理jQuery对象，它似乎可以在IE9，chrome，FF和IE兼容模式下工作.
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
这篇关于jQuery动态添加的复选框.attr("checked"，true)不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
