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