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 visual也会改变.

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