jquery - jQuery UI 按钮功能在复选框上不起作用

Question

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

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

这是我的代码

HTML：

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

JavaScript：

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

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

演示

Answer 1

解决方案：
将html更改为：

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

它会正常工作，演示。

说明：
如果您检查 jQuery-UI 代码，尤其是函数_determineButtonType（版本 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 假设它可以在输入的最后一个父级中找到标签，而在您的示例中，标签是最后一个父级。
我认为这是一个应该修复的错误，因为许多开发人员都有这样写标签的习惯。

Answer 2

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

http://jsfiddle.net/cY7fe/2/

复选框不应该在标签内，而是在它旁边。它现在似乎正在工作。