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

普通按钮可以正常工作,但复选框不起作用!

这是我的代码

HTML:

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


JavaScript:

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


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

DEMO

最佳答案

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

10-05 23:21
查看更多