jquery-ui - 显示正常复选框的 jQuery UI 复选框按钮

Question

HTML：

<input id="1" type="checkbox" checked="checked" />
<label for="1">Online</label>

jQuery：

$(function () {
    $('input[type=checkbox]').button();
});

在浏览器中呈现时，它会同时显示传统的复选框和下方的按钮。我可以点击任何一个，他们将切换复选框。这是浏览器中的 HTML：

<input id="1" type="checkbox" checked="checked" class="ui-helper-hidden-accessible">
<label for="1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Online</span></label>

当我在 jsfiddle 中输入相同的内容时，它可以完美运行，只需获取切换按钮。所以我很茫然是什么原因造成的？

Answer 1

你的 jQuery 选择器是错误的。您需要将 " 添加到类型中，如下所示：

$('input[type="checkbox"]').button();