チェックボックスのヘルパーメソッド

概要

いつもの自分用メモシリーズです。

ヘルパーメソッドを利用したcheckboxの作り方を残しておきます。

また、ヘルパーメソッドあるあるかもしれませんが、classの指定に少し苦労しました。

そのあたりについても最後に触れておきます。

ヘルパーメソッド

<%= f.collection_check_boxes("メソッドの引数”) do |b| %>
  <%= b.label {b.check_box + b.text } %>

<% end %>

上記が基本形です。

2行目の{ b.check_box + b.text }の部分で、チェックボックスとラベルテキストを生成しているイメージでしょうか。

 

引数に関しては以下の通りです。

"保存するフィールド名", "展開する配列", "value属性として扱うフィールド", "b.textとして表示するフィールド", "オプション"

 

例)

:user_id, User.all, :id, :name, include_hidden: false, checked: @~.user_id

解説)

userモデルのレコードの数だけチェックボックスを生成し、ユーザー名を表示する。

チェックをつけたuserに関しては、そのuserのidが、フォームで指定しているテーブルのuser_idカラムに保存される。

include_hidden: falseを指定しているので、空の文字列は送信されない。

checked: を指定しているので、バリデーションエラーなどでこのページに戻された場合でも直前のチェック内容は保持される。

 

オプションに関する注意点

上記でも触れましたが、このヘルパーメソッドではcheckedオプションが大切です。

このオプションは、renderメソッドなどでページを遷移したときに、直前に選択していたものにチェックをつけて表示するための役割を果たしています。

他のフォーム部品(inputなど)だと問題ないこともあるのですが。

ちなみに、上記のオプションが必要なのはルーティングを経由していない時だけです。

最初にルーティング経由であれば、テーブルに保存されている値と対応した部分にはチェックが入った状態で表示がされるのですが、その分忘れやすいかもしれないですね。

クラスの指定に関して

このヘルパーメソッドはlabelとinputを同時に生成する都合上、クラスの指定が少し難しいです。

私はbootstrapを使うことが多いのですが、

div.form-check

>>label.form-check-label

>>input.form-check-input

という書き方はできません。

 

とりあえずは、collection_check_boxesメソッドのループの中身を<div class="form-group form-check form-check-inline">などで囲んでそれらしくしていますが、いずれは何かを考えないといけなくなるかもしれないですね。