Состояние кнопки jqueryui не изменяется при вызове реквизита

Question

Я использую простой вызов реквизита для изменения состояния jqueryui кнопки «переключения» (она же checkbox), используя это: $("#completed_button").prop("checked", true);

Функционально флажок изменяет состояние и скриптработает правильно.К сожалению, это не меняет визуальное состояние кнопки.Любая идея, почему это не так, и что я могу сделать, чтобы сделать это так?

Пример: ниже середины, как это выглядит, когда вы используете мышь для переключения, верно, что происходит, когда я использую вышеупомянутый вызов.Обратите внимание, что текст правильный, но визуальная подсветка - нет.

Answer 1

Проблема в том, что элементы jQuery-UI для кнопки прослушивают события изменения от кнопки-переключателя, но событие изменения не срабатывает, когда вы говорите .prop('checked', true). Это поведение полностью восходит к модели событий DOM Level 2 :

Событие изменения происходит, когда элемент управления теряет фокус ввода и его значение было изменено с момента получения фокуса. Это событие действительно для INPUT, SELECT и TEXTAREA. элемент.

Вызов .prop('checked', true) (или даже .attr('checked', 'checked')) не изменяет фокус, поэтому событие изменения не происходит.

Решение состоит в том, чтобы вызвать событие изменения самостоятельно:

$("#completed_button").prop("checked", true).change();

Это должно позволить оболочке jQuery-UI знать, что флажок изменил состояние, и тогда также изменится визуальный элемент jQuery-UI.

Вот короткая демонстрация, которая иллюстрирует, что происходит: http://jsfiddle.net/ambiguous/8et3G/