質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2659閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/10 08:27

前提・実現したいこと

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

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

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

css

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

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

rails

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

css

1.checkbox01 { 2 box-sizing: border-box; 3 cursor: pointer; 4 display: inline-block; 5 padding: 5px 30px; 6 position: relative; 7 width: auto; 8} 9.checkbox01::before { 10 background: #fff; 11 border: 1px solid #635f5a; 12 content: ''; 13 display: block; 14 height: 16px; 15 left: 5px; 16 margin-top: -8px; 17 position: absolute; 18 top: 50%; 19 width: 16px; 20} 21.checkbox01::after { 22 border-right: 3px solid #ed7a9c; 23 border-bottom: 3px solid #ed7a9c; 24 content: ''; 25 display: block; 26 height: 9px; 27 left: 10px; 28 margin-top: -7px; 29 opacity: 0; 30 position: absolute; 31 top: 50%; 32 transform: rotate(45deg); 33 width: 5px; 34} 35input[type=checkbox]:checked + .checkbox01::after { 36 opacity: 1; 37}

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

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

試したこと

rails

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

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

rails

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

投稿2020/09/10 09:51

necocoa

総合スコア209

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/09/10 10:12

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

2020/10/09 03:16 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問