Rails5でmaterializeを使用したcheckboxを表示する方法

Tweet

Railsを使いながらmaterializeを適用してcheckboxを表示しようとすると、checkboxが消えてしまうことがあります。
または、checkboxが表示されても、それを操作できないという場合もあります。
どのように修正すべきか、解説します。

labelはcheckboxの後に配置する

labelとcheckboxの前後関係がどうやら関係しているようです。
必ずcheckboxの後にlabelを設置しましょう。
さもないと、checkboxが表示すらされません。

labelとcheckboxの間に<br>を入れない

<br>を入れるとうまく認識されず、checkboxが表示されません。

checkboxにidを指定する

labelをform.labelを使って表示している場合、まずはlabelのfor属性を確認します。これは実際に出力されたHTMLを確認するのが手っ取り早いとおもいます。おそらく、「モデル名_列名」の形となっていると思います。

確認できましたら、それをcheckboxのidに指定します。例えば

<%= form.check_box :your-column-name, id:'your-model-name_your-column-name' %>

のような形となります。そうすると正常に表示されると思います。
最終的な形は

<%= form.check_box :your-column-name, id:'your-model-name_your-column-name' %>
<%= form.label :your-column-name %>

となります。

ご覧いただきありがとうございました。

参考:Checkboxes - Materialize