3

jQueryUIボタンウィジェット、特にチェックボックスを素敵なボタンに変えるオプションを使用しようとしています。

通常のボタンは正常に機能しますが、チェックボックスは機能しません!

これが私のコードです

HTML:

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

JavaScript:

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

チェックボックスで機能しない理由がわかりません!!

デモ

4

2 に答える 2

7

解決策：
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は、入力の最後の親内でラベルを見つけることができると想定しますが、この例では、ラベルが最後の親です。
多くの開発者はそのようにラベルを書く習慣があるので、これは修正すべきバグだと思います。

于 2012-06-09T22:47:12.113 に答える
3 
<button id="button">button</button>
<label for="input">Checkbox</label>
<input id="input" type="checkbox"/>

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

チェックボックスは、ラベル内ではなく、ラベルの横にあるべきでした。それは今働いているようです。

于 2012-06-09T22:44:29.470 に答える