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一直在標籤內，而是在它旁邊。它現在似乎在工作。