jqueryui按钮状态不会改变道具调用

Question

我正在使用一个简单的道具调用来改变jqueryui“切换”按钮（又名checkbox）的状态： $("#completed_button").prop("checked", true);

功能上，复选框正在改变状态，脚本正常运行。不幸的是，它没有改变按钮的视觉状态。知道为什么它不能以及我能做些什么才能做到这一点？

示例：当您使用鼠标切换时，中间下方是它的样子，正确的是当我使用上述调用时会发生什么。注意文本是如何正确的，但视觉突出显示不是。

Answer 1

问题是该按钮的jQuery-UI元素正在从切换按钮侦听更改事件，但是当您说.prop('checked', true)时，更改事件不会触发。此行为一直回到DOM Level 2 Event Model：

  

当控件失去输入焦点并且自获得焦点后其值已被修改时，会发生更改事件。此事件对INPUT，SELECT和TEXTAREA有效。元件。

调用.prop('checked', true)（或甚至.attr('checked', 'checked')）不会改变焦点，因此不会发生更改事件。

解决方案是自己触发更改事件：

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

那应该让jQuery-UI包装器知道复选框已经改变状态，然后jQuery-UI visual也会改变。

这是一个快速演示，演示了正在发生的事情：http://jsfiddle.net/ambiguous/8et3G/