久しぶりにHTMLではまったメモです。
<label>
<input type="checkbox">メルマガを受け取る
</label>
みたいなよくあるラベルの使い方をしているHTMLを組んで、
Railに組み込んでフォーム系の機能でよくある実装をしたら、
FirefoxやIEでチェックボックスが効かなくなるという不思議な事態に陥りました。Chromeは大丈夫。
JSでchangeイベントも取れないので、ブラウザのバグとかCSSみたいなレベルじゃない感じがしたので調べてみました。
Webインスペクタで出力されているHTMLをみると次のような感じ。
<label>
<input type="hidden" name="hogehoge[mailmagazine]">
<input type="checkbox" name="hogehoge[mailmagazine]">メルマガを受け取る
</label>
チェックボックスの直前にinput[type='hidden']要素が入っていて、これはどうやらRails側で挿入されるものらしいです。
この時点で条件がいくつか考えられるので、jsdo.itでサンプルをつくって検証してみました。
どうやらラベルにひもづけられる子要素のコントロールは出現順で最初の1つのみのようです。
結果的にlabel要素がinput[type='hidden']要素に紐付いてしまうため、子要素であってもラベルとチェックボックスのほうとは連動しない、ということのようです。
今回は、(Railsの中身の処理を変えられないこともあり)id属性とfor属性で明示的にヒモ付けることで回避することがきました。
<label for="hoge">
<input type="hidden">
<input type="checkbox" id="hoge">
メルマガを受け取る
</label>
よく考えれば当たり前な挙動ですが、Chromeでは動いちゃったりもあり、label要素は必ずクリッカブルなフォームコントロールに紐づくという思い込みではまってしまったなーというオチでした。