以编程方式取消选中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()方法，但这听起来不太优雅。

- A. Murray

---

JQuery UI的按钮在INPUT上不应更改任何HTML。因此，您编写的内容应该是可能的。您能否写更多关于您正在使用的选中/取消选中的内容？ - Marco Johannesen

Answer 1

试试这个：

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

这只是针对您的情况的猜测，但通常对我非常有效。

编辑：查看jQueryUI文档后，这是一个方法，您应该在编程更改复选框状态后尝试：

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

"刷新按钮的视觉状态。在原生元素的选中或禁用状态在程序上发生变化后，更新按钮状态很有用。"

- Zsolt

---

removeAttr和button('refresh')的组合起作用了。非常感谢！ - A. Murray

只是提供信息... button 和 buttonset 都支持 "refresh" 命令！ - Encoder

在当前版本的jQuery中，这将无法产生所需的行为。你必须使用.prop()代替。 - Blazemonger

Answer 2

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

jQuery 1.6.0及以后版本：$('#locked').prop('checked', false);

checked属性现在被视为一种属性，并且有自己的方法。如果可用，应使用.prop()来确保用户能够观察到所需的行为。

- Blazemonger

Answer 3

在较新版本的JQueryUI中，必须使用refresh选项来调用checkboxradio()函数，如下所示：

最初的回答

$("#selector").checkboxradio("refresh");

为了在使用.prop("checked", true);或.prop("checked", false);来检查或取消复选框本身后，在视觉上更新复选框，您需要使用refresh()方法来刷新小部件的视觉状态。该方法非常有用，可以在程序中更改本机元素的选中或禁用状态后进行更新。

来源：API文档：http://api.jqueryui.com/checkboxradio/

- twhitney

Answer 4

在 jQuery 1.6+ 版本中，使用新的 .prop() 函数：

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

或者使用id。

$('#myCheckboxId').prop('checked', false);

对于jQuery 1.5及以下版本：

$('.myCheckbox').attr('checked','checked');
$('.myCheckbox').removeAttr('checked');

- SaiKiran Mandhala