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的代码，尤其是功能_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/

复选框should'nt一直在标签内，而是在它旁边。它现在似乎在工作。