以编程方式取消选中jQuery UI复选框按钮

Question

我的页面上有一个HTML复选框元素,如下所示:

<input type="checkbox" id="locked" /><label for="locked">Locked</label>

我在$(document).ready()内部调用,将其更改为jQuery UI复选框按钮,如下所示:

$('#locked').button({
    'icons': {
        'primary': 'ui-icon-unlocked'
    },
    'label': 'Unlocked'
});

背景上下文是用户可以使用此按钮来锁定/解锁特定实体,以便后台进程不会改变它并且它以"未锁定"状态开始.如果未启用javascript,则用户会看到一个复选框,并在其旁边显示"已锁定"标签.

我希望能够以编程方式选中/取消选中此复选框按钮.我试过了:

$('#locked').attr('checked', false);

但复选框按钮不会更新以反映基础控件的已检查状态.

我可以测试复选框的checked属性然后执行.click()如果它与我想要的不匹配但听起来不是很优雅.

Answer 1

试试这个:

$('#locked').removeAttr('checked');

这只是对你的情况的猜测,但通常对我来说就像一个魅力.

编辑:看看jQueryUI文档,这是一个方法,你应该在以编程方式更改复选框的状态后尝试:

$('#locked').button( "refresh" )

"刷新按钮的可视状态.用于在以编程方式更改本机元素的已检查或禁用状态后更新按钮状态."

[在当前版本的jQuery中](http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-),这不会产生所需的行为.你*必须*使用[`.prop()`](http://stackoverflow.com/a/7389350/901048). (3认同)
removeAttr和button('refresh')的组合起作用了.非常感谢! (2认同)

Answer 2

jQuery 1.5.x及更早版本: $('#locked').attr('checked','');

jQuery 1.6.0及更高版本: $('#locked').prop('checked', false);

该checked属性被视为属性,现在有自己的方法..prop()如果可用,则应使用以确保用户观察到所需的行为.