Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

チェックボックスが効かなくなるlabelとinput要素のヒモ付けの妙

More than 1 year has passed since last update.

久しぶりに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でサンプルをつくって検証してみました。

http://jsdo.it/yd_niku/8Pcu/

どうやらラベルにひもづけられる子要素のコントロールは出現順で最初の1つのみのようです。

結果的にlabel要素がinput[type='hidden']要素に紐付いてしまうため、子要素であってもラベルとチェックボックスのほうとは連動しない、ということのようです。

今回は、(Railsの中身の処理を変えられないこともあり)id属性とfor属性で明示的にヒモ付けることで回避することがきました。

<label for="hoge">
    <input type="hidden">
    <input type="checkbox" id="hoge">
    メルマガを受け取る
</label>

よく考えれば当たり前な挙動ですが、Chromeでは動いちゃったりもあり、label要素は必ずクリッカブルなフォームコントロールに紐づくという思い込みではまってしまったなーというオチでした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away