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" )

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

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);来选中或取消选中复选框本身后直观地更新复选框。

refresh（）

刷新小部件的视觉状态。通过编程更改本机元素的选中或禁用状态后，进行更新很有用。