jQuery UI 按钮功能不适用于复选框

Question

我正在尝试使用 jQueryUI button小部件，尤其是将复选框变成漂亮按钮的选项。

普通按钮可以正常工作，但复选框不行!

这是我的代码

HTML:

<button id="button">button</button>
<label for="input">
    <input id="input" type="checkbox"/>Checkbox
</label>

JavaScript:

$('#button').button();
$('#input').button();

我不明白为什么它在复选框上不起作用!!

DEMO

Answer 1

解决方案:
将 html 更改为:

<button id="button">button</button>
<label for="input">
    Checkbox
</label>
<input id="input" type="checkbox"/>

它会正常工作，demo .

说明:
如果你检查 jQuery-UI 代码，特别是函数 _defineButtonType (版本 1.8.18 上的第 7069 行)，你会发现

var ancestor = this.element.parents().filter(":last"),
            labelSelector = "label[for='" + this.element.attr("id") + "']";
this.buttonElement = ancestor.find( labelSelector );

因此 jQuery-UI 假设它可以在输入的最后一个父级中找到标签，而在您的示例中，标签是最后一个父级。
我认为这是一个应该修复的错误，因为许多开发人员都有这样编写标签的习惯。