jquery - 以编程方式取消选中 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);

但是复选框按钮不会更新以反射(reflect)基础控件的选中状态。

我可以测试复选框的选中属性，然后如果它与我想要的不匹配，则执行 .click() ，但这听起来不太优雅。

Answer 1

试试这个:

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

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

编辑:查看 jQueryUI 文档，这是您在以编程方式更改复选框状态后也应该尝试的方法:

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

“刷新按钮的视觉状态。对于以编程方式更改 native 元素的选中或禁用状态后更新按钮状态很有用。”