【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制御をする準備ができるようになりました。