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

【问题标题】：Programmatically uncheck jQuery UI checkbox button以编程方式取消选中 jQuery UI 复选框按钮
【发布时间】：2011-11-15 09:37:33
【问题描述】：

我的页面上有一个 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);

但复选框按钮不会更新以反映底层控件的选中状态。

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

【问题讨论】：

【解决方案1】：

试试这个：

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

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

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

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

“刷新按钮的视觉状态。在本机元素的检查或禁用状态以编程方式更改后更新按钮状态很有用。”

【讨论】：

【解决方案2】：

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

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

checked 属性被认为是一个属性，并且现在有自己的方法。如果可以使用.prop()，您应该使用它来确保您的用户观察到所需的行为。

【讨论】：

【解决方案3】：

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

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

或带身份证

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

对于 jQuery 1.5 及以下版本

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

【讨论】：

【解决方案4】：

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

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

为了在使用.prop("checked", true); 或.prop("checked", false); 选中或取消选中复选框本身后直观地更新复选框。

刷新()

刷新小部件的视觉状态。在以编程方式更改本机元素的检查或禁用状态后更新很有用。

【讨论】：