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();

我不明白为什么它不能在复选框上工作！！

演示

- ilyes kooli

---

有没有文档说明可以将复选框转换为按钮？ - Ash Burlaczenko

@AshBurlaczenko，这在OP提供链接的概述部分的第二段中 :) - Fabrício Matté

@AshBurlaczenko http://jqueryui.com/demos/button/#checkbox - ilyes kooli

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假定它可以在输入框的最后一个父节点中找到标签，而在您的示例中，标签是最后一个父节点。
我认为这是一个应该被修复的错误，因为许多开发人员习惯这样编写标签。

- ilyes kooli

Answer 2

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

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

复选框不应该在标签内部，而是在标签旁边。现在似乎可以正常工作了。

- Joey

---

谢谢，看到skafandri的解释了吗？ - ilyes kooli

是的，我有。他非常仔细，值得获得“答案”分数。 - Joey