Help us understand the problem. What is going on with this article?

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

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

ラベルの場所

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

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

BRSF
職業、PG・SE・DBエンジニア。オープン環境のwebプログラムをメインにシステム構築担当。使用言語はPHP(cakePHP、Laravel含)jQuery、JavaScript、ExcelVBA、Perl、Ruby、Python。現在Vue、React、Angular強化中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした