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

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

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

Answer 1

试试这个：

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

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

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

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

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

Answer 2

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

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

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

Answer 3

在 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');

Answer 4

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

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

以便在 .prop("checked ", true); 或 .prop("checked", false); 用于选中或取消选中复选框本身。

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

刷新()

刷新小部件的视觉状态。对于以编程方式更改本机元素的选中或禁用状态后进行更新很有用。