Question

可以在这里看到所谓的渲染错误：

<input id="box" type="checkbox">
<button id="chk">Check</button>
<button id="unchk">Uncheck</button>

function check() {
    $("#box").prop("checked", "checked");
}

function uncheck() {
    $("#box").removeProp("checked");
}

$("#chk").click(check);
$("#unchk").click(uncheck);

受影响的浏览器包括：Chrome 27，Android Froyo和我的同事的iPhone（版本？）。不受影响：IE9，FireFox 22

在受影响的浏览器上，您可以每次单击“检查”和“取消选中”按钮，之后它们似乎停止工作。

尽管出现了问题，但每次点击都会设置正确设置的复选框状态。我使用Chrome调试器来得出这个结论。

较新版本的jQuery似乎对结果没有影响。

如果答案很明显，我确实花了一些时间搜索SO和Google！

提前致谢。

Answer 1

你想在prop中检查和取消选中使用布尔值，不要使用removeProp，这可能会在你提到的某个浏览器中从元素中删除checked属性，并且可能导致这样的问题。

function check() {
    $("#box").prop("checked", true);
}

function uncheck() {
    $("#box").prop("checked", false);
}

<强> Demo

参见 doc

.removeProp（）方法删除.prop（）方法设置的属性。

使用DOM元素或窗口对象的某些内置属性，如果尝试删除属性，浏览器可能会生成错误。 jQuery首先将值undefined分配给属性，并忽略浏览器生成的任何错误。通常，只需要删除已在对象上设置的自定义属性，而不是内置（本机）属性。

注意：请勿使用此方法删除本机属性，例如已选中，已禁用或已选中。这将完全删除属性，一旦删除，就不能再次添加到元素。使用.prop（）将这些属性设置为false。

Answer 2

这样做：

function check() {
    $("#box").prop("checked", true);
}

function uncheck() {
    $("#box").prop("checked", false);
}

如何绕过这个明显的Webkit复选框渲染错误？

2 个答案: