javascript - jQuery UI で使用する既存のチェックボックスのラベルを生成する

Question

jQuery UI buttonsを使用して、ページ上のすべてのチェックボックスのスタイルを設定できるようにしたいと考えています。ただし、多くのボタンにはラベルがありません。私がこのようなことをする方法はありますか:

$(".unlabeled-checkbox").append("<label> </label>").button();

しかし、ラベルの「for」属性も適切に記入しますか?

Answer 1

wrap()メソッドに実行する関数を渡すことができます。これを試してください：

$('.unlabeled-checkbox').wrap(function() {
    return $('<label></label>').attr('for', $(this).prop('name'));
});

関数内では、配列内thisの現在の要素を参照します。.unlabeled-checkbox

Answer 2

すべてのチェックボックスをラップするには、jQuery の「ラップ」機能を使用できます。

$(".unlabeled-checkbox").wrap("<label></label>");

それはHTMLを生成します：

<label>
    <input class="unlabeled-checkbox" type="checkbox" value="a" />
</label>
<label>
    <input class="unlabeled-checkbox" type="checkbox" value="b" />
</label>

ラップアラウンド<label>する<input>場合、「for」属性は必要ありません。ラベルをクリックすると、内側のチェックボックスがクリックされます。