【Rails】Ransackのcollection_check_boxesで、checkboxタグに任意のクラスを指定する

チェックボックスでAjax制御しようとして、クラス名を付与しようとしたところ、collection_check_boxesだと普通にやってもクラス指定できなかったので、色々ページを巡回し、ようやく海外ページのフォーラムで手がかりを発見したのでメモ。

やりたいこと。テーブル値@regionsでチェックボックスを作成し、class名、chkgroupを付けたい。
#駄目な例

html.erb

<%= search_form_for(@q , :id=>'city-form', :remote => true ) do |f| %>
 <%= f.collection_check_boxes :regions_in, @regions, :id, :name, class : 'chkgroup' %>
<% end %>

Chromeで開発画面を見ても、クラス名は何も表示されていません。そこで色々と巡回していると、こんなページを見つけたものの、checkboxならこれで行けるけど、collection_check_boxesでは対応していませんでした。

#collection_check_boxesの構造
あれこれ試行錯誤した末、多分、checkboxとcollection_check_boxesの構造が異なっているのと思い、ページを巡回していると、qiita内にこんなページが。

collection_check_boxesメソッドの構造確認

なるほどと思い、これと同じようにループ構造にして、そこにチェックボックスタグを入れたりしてみたのですが、これも失敗。

#解決方法
めげずに、他に巡回していると、GitHubのフォーラムに、大きなヒントとなる方法が。

collection_check_boxes - set custom class

この方法だと確かにラベル側に任意のクラスを指定できました。ですが、今回自分がやりたいのはcheckboxタグ側にクラス名を付与すること。そこで、labelタグをループさせることができるのなら、checkboxタグもループできるのでないかと試したところ…。

html.erb

		<%= f.collection_check_boxes(:region_in,@regions, :region, :region,include_hidden: false) do |b| %>
			<label class="checkbox-inline">
			 <%= b.check_box class:"chkgroup" do %>
				 <%= b.check_box + b.text %>
	　　　    <% end %>
				 <%= b.label {b.text} %>

			</label>
		<% end %>
			

成功！とりあえずはチェックボックス内にクラスが入りました。あとはラベルを取り付けるだけです。

#ラベルの場所
ですが、このラベルの場所も気をつけないといけません。checkboxタグのループに入れてもエラーとなるので、ループの外側に入れる必要があります。

index.html.erb

<%= search_form_for(@q , :id=>'city-form', :remote => true ) do |f| %>
     <%= f.collection_check_boxes(:region_in,@regions, :id, :name) do |b| %>
         <%= b.label {b.text} %>
         <%= b.check_box class:"chkgroup" do %>
             <%= b.check_box + b.text %>
　　　    <% end %>
    <% end %>
<% end %>			

これで、チェックボックスの値に対してもAjax制御をする準備ができるようになりました。