选中的复选框显示为未选中

Question

我将一个数组传递给一个函数，该函数应该检查/取消选中 jQuery 对话框中的某个复选框。

function preCheck(boolArray){
 $("#cb0").attr("checked", boolArray[0]);
 $("#cb1").attr("checked", boolArray[1]);
 $("#cb2").attr("checked", boolArray[2]);
 $("#cb3").attr("checked", boolArray[3]);
 //etc.
 $("#divform").dialog("open");
}

这些复选框被放置在 divform 中，该 divform 在 document.ready 函数中被称为对话框。 boolArray 中的值由我单击哪个按钮打开对话框定义（导致根据单击哪个按钮检查不同的复选框）。

我的问题如下：第一次单击按钮时，复选框会根据 boolArray 进行相应检查。如果我手动选中/取消选中某些 > 关闭对话框 > 重新单击同一个按钮以打开对话框，复选框将保持在我关闭对话框之前的状态，并且不再根据 boolArray 的值进行选中/取消选中。更令人沮丧的是，我未选中而应该选中的那个（根据 boolArray 中的布尔值）在 HTML 中显示为checked="checked"，即使没有刻度线。任何帮助将不胜感激，我真的迷路了。

Answer 1

尝试 .prop() 代替。这是一个演示：http://jsfiddle.net/hxsRK/ 即使您更新阵列，这将继续有效。

function preCheck(boolArray){
 $("#cb0").prop("checked", boolArray[0]);
 $("#cb1").prop("checked", boolArray[1]);
 $("#cb2").prop("checked", boolArray[2]);
 $("#cb3").prop("checked", boolArray[3]);
}

var checks = [true, false, true, true, false];
$('button').click(function(){
    preCheck(checks);
});

Answer 2

您应该使用.prop() instead of .attr()。

来自 jQuery 文档：

根据 W3C 表单规范，checked 属性是一个布尔属性，这意味着如果该属性完全存在，则相应的属性为真——即使，例如，该属性没有值或设置为空字符串价值甚至“假”。这适用于所有布尔属性。

您可能会看到这种行为：您已设置属性并正在更改其值；因为它是布尔值，所以它的存在意味着您的复选框已被选中。

试试这个：

function preCheck(boolArray){
 $("#cb0").prop("checked", boolArray[0]);
 $("#cb1").prop("checked", boolArray[1]);
 $("#cb2").prop("checked", boolArray[2]);
 $("#cb3").prop("checked", boolArray[3]);
 //etc.
 $("#divform").dialog("open");
}