Как обойти эту очевидную ошибку рендеринга флажка Webkit?

Question

Предполагаемая ошибка рендеринга можно увидеть здесь:

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!

Заранее спасибо.

Answer 1

Вы хотите, чтобы проверить и снять флажок использовать логические значения в проп, не используйте removeProp что может привести к удалению свойства selected из элемента в каком-либо браузере, как вы упомянули, и может вызвать такие проблемы.

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

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

демонстрация

См док

Метод.removeProp() удаляет свойства, установленные методом.prop().

С некоторыми встроенными свойствами элемента DOM или объекта окна, браузеры могут генерировать ошибку, если предпринята попытка удалить свойство. Сначала jQuery присваивает свойству значение undefined и игнорирует любую ошибку, сгенерированную браузером. В общем случае необходимо удалить только пользовательские свойства, которые были установлены для объекта, а не встроенные (собственные) свойства.

Примечание. Не используйте этот метод для удаления собственных свойств, таких как отмеченные, отключенные или выбранные. Это полностью удалит свойство и после удаления не может быть снова добавлено к элементу. Используйте.prop(), чтобы вместо этих свойств установить false.

Answer 2

Сделай это так:

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

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