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

我无法理解为什么它对复选框不起作用!!

DEMO

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