ransackでつけたcheckboxにidを付与したい

Question

前提・実現したいこと

ransackを用いて、checkboxにチェックしたものを検索する機能をつけています。
そこまではうまくいったのですが、デフォルトのチェックボックスではなく、CSSで装飾を施したいと考えました。

発生している問題・エラーメッセージ

チェックボックスにCSSを施すには、
①チェックボックスをCSSで見えなくする

input[type=checkbox] {
  display: none;
}

②label要素を追加し、そこにチェックボックス（仮）をCSSで作成する

<%= f.label "お米", for: "main1", class: "checkbox01" %> #追加
<%= f.check_box :main_eq_any, { multiple: true }, "お米" %>

.checkbox01 {
  box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox01::before {
    background: #fff;
    border: 1px solid #635f5a;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.checkbox01::after {
    border-right: 3px solid #ed7a9c;
    border-bottom: 3px solid #ed7a9c;
    content: '';
    display: block;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 5px;
}
input[type=checkbox]:checked + .checkbox01::after {
    opacity: 1;
}

③label要素とcheckbox要素のidを揃えて、labelを押すとcheckされるようにする

というような手順だということが
https://creative.eccom.jp/941/
こちらのサイトを参考にして判明したのですが、③のcheckboxの要素にidを付与することができず、表示されているチェックボックス（仮）を押しても、チェックした判定になりません。

試したこと

<%= search_form_for @r, url: search_refrigerators_path do |f| %>
  <%= f.label "お米", for: "main1", class: "checkbox01" %>
　<%= f.check_box :main_eq_any, { multiple: true }, "お米", "nil", id: "main1" %>
  <%= f.submit "OK", class: "ok-btn"%>
<% end %>

→引数が5個あるのでエラー

<%= search_form_for @r, url: search_refrigerators_path do |f| %>
  <%= f.label "お米", for: "main1", class: "checkbox01" %>
　<%= f.check_box :main_eq_any, { multiple: true }, "お米", id: "main1" %>
  <%= f.submit "OK", class: "ok-btn"%>
<% end %>

→ログにすら何の変化もなし

残り、chackbox要素にidがつけられたらうまく回りそうなのですが、、
どなたかご存知の方いらっしゃいましたらご教授願えませんでしょうか、、。

Answer 1

main_eq_anyというidがすでに作られていると思いますが、
この感じですと複数のチェックボックスを作ったときにidがかぶるという問題なのかと思います。

このように配列をeachで回し、labelにはkeyを付ける形が良いかと思います。
自分のコードで恐縮ですが、参考にしてください。

- tasks.each do |name, key|
  = f.check_box : task_eq_any, {  multiple: true }, key, nil
  = f.label "task_eq_any_#{key}", name

また、collection_check_boxesというメソッドを使うと、上記のような複数のラベルとチェックボックスを作ることができます。

= f.collection_check_boxes :labels_id_in, tasks, :id, :name

参考にして実装してみてください！

Comments

[退会済みユーザー]

main_eq_any　がもう既にidなのですね、、！不勉強で申し訳ないです、、。
ご丁寧にありがとうございます！
やってみます！

[necocoa]

ご自身でchromeのデベロッパーツールを使ってidを確認してみると良いと思います！!