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

Answer 2

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

http://jsfiddle.net/cY7fe/2/

复选框不应位于标签内，而应位于标签旁边。它似乎现在正在运作。

jQuery UI按钮功能不适用于复选框

2 个答案: