1. yd_niku

    Posted

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