checkboxとlabelの変な現象

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

railsで、checkboxとlabelの組み合わせで、チェックボックスが反応なしの現象が起こりました。

調査しにくいので、共有したいと思います。

■ 現象

チェックボックスをクリックしても、チェックされなくて、反応なしです。

■ 開発環境

Rails 4.1.4

ruby 2.1.2p95

viewテンプレート: erb

■ lable forとは

<lable for="ID属性値">タグを使用すると、
<lable>タグの開始タグと終了タグに挟まれた文書が、
ID属性の属性値として「ID属性値」と同じ値が書き込まれた部品と、関連付けされます。

■ 発生状況

<%= check_box_tag '/feature_ids[]'/, feature.id, feature_ids.include?(feature.id), 
id: "feature_id_1_#{ feature.id }", class: "g_1" %>
<lable for="<%= " feature_id_#{ feature.id }" %>"><%= feature.name %></lable>

checkboxのID：feature_id_1_#{ feature.id }

lableのfor：　　 feature_id_#{ feature.id }

checkboxのIDを修正し、lableのforを修正し忘れたため、現象が起こりました。

■ 対処

lableのforの値はcheckboxのidと一致します。

※関連付けるために、値は一致しないのは正しくないですが、

まさかチェックボックス動作に影響するのは思いませんでした。