How do I bypass this apparent Webkit checkbox rendering bug?

Question

The alleged rendering bug can be seen here:

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);

Affected browsers include: Chrome 27, Android Froyo, and my co-worker's iPhone (version?). Unaffected: IE9, FireFox 22

On the affected browsers, You can click the "Check" and "Uncheck" buttons each once, and after that they appear to stop working.

Despite appearances, the checkbox state appears to be set correctly set with each click. I used the Chrome debugger to reach this conclusion.

Newer versions of jQuery seem to have no effect on the outcome.

In case the answer is obvious, I did spend some time searching on SO and Google!

Thanks in advance.

Answer 1

You want to check and uncheck use boolean values in prop, do not use removeProp which may end up removing the checked property from the element in some browser as you mentioned and can cause issues like this.

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

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

Demo

See doc

The .removeProp() method removes properties set by the .prop() method.

With some built-in properties of a DOM element or window object, browsers may generate an error if an attempt is made to remove the property. jQuery first assigns the value undefined to the property and ignores any error the browser generates. In general, it is only necessary to remove custom properties that have been set on an object, and not built-in (native) properties.

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.