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

How do I bypass this apparent Webkit checkbox rendering bug?

本文关键字：复选框 Webkit 错误 何绕过      更新时间：2023-09-26

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

http://jsfiddle.net/2FZhW/

<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上搜索！

提前谢谢。

您想选中和取消选中在 prop 中使用布尔值，请不要使用 removeProp，正如您提到的，这最终可能会从某些浏览器中的元素中删除 checked 属性，并可能导致这样的问题。

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

演示

查看文档

.removeProp(( 方法删除由 .prop(( 方法设置的属性。

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

注意：不要使用此方法删除本机属性，例如选中、禁用或选定。这将完全删除该属性，并且一旦删除，就无法再次添加到元素中。使用 .prop(( 将这些属性设置为 false。

相关文章：