Railsでチェックボックスのラベルをクリックする

前置き

Railsでチェックボックス付きのフォームを作ったら、ラベル部分のクリックが効きませんでした。その解決の顛末です。

本文

HTMLのフォームでチェックボックスとラベルを関連付ける方法は2種類あります。

  • <input>を<label>の子要素とする
 <label><input type="checkbox" name="check1" />Check1</label>
  • <label>のfor属性と<input>のid属性を使う
 <input type="checkbox" name="check2" id="check2_id" /><label for="check2_id">Check2</label>

関連付けておけば、ラベル部分をクリックすることによりチェックボックスのON/OFF操作が可能です。

で、よりシンプルな前者の方法を使ってrailsのテンプレートを作りました。

 <label><%= f.check_box 'check1' %>Check1</label>

しかし、なぜか、ラベルのクリックが効きません。railsが出力するHTMLを見てみると、こんな感じでした(見やすいように整形してます)。

 <label>
   <input name="model[check1]" type="hidden" value="0" />
   <input id="model_check1" name="model[check1]" type="checkbox" value="1" />
   Check1
 </label>

謎の隠し<input>が付け加えられています。これでは、おそらく隠し<input>の方にラベルが関連付けられてしまうのだと思います。

そこで、もう一つの方法、つまり<label>のfor属性を使う方法に切り替えました。

 <%= f.check_box 'check1' %><label for="model_check1">Check1</label>

これで、ラベルのクリックが効くようになります。しかし<input>に付けられるid属性はrailsが自動生成するので、その生成規則を推測して<label>のfor属性をテンプレートに書く必要があります。これはスマートとは言えません。スマートなrailsが、それを放っておくはずがないですね。ちゃんと解決策が用意されてました。

 <%= f.check_box 'check1' %><%= f.label 'check1', 'Check1' %>

これでOKです。

Last modified:2010/05/24 10:48:39
Keyword(s):
References:[言語Tips]
This page is frozen.