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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

解決済

Rails Javascriptを使ってフォーム項目の表示/非常時

Komama
Komama

総合スコア0

Ruby on Rails 5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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

1回答

0評価

0クリップ

2163閲覧

投稿2019/11/21 08:34

RailsでJavascriptを使ってフォーム項目の表示/非表示の切り替えを行いたいです。

ラジオボタンでvalueがtrueの時は表示、falseの時は非常時としたいです。
一度は正常に切り替えることが出来たのですがCSSのラジオボタンを装飾するためにコードを変更したら動かなくなってしまいました。
HTMLのclass, valueの指定はあってるように見えるのですが原因を教えていただければと思います。

■装飾したラジオボタン
イメージ説明

■new.html.erb

<div class="form-group"> <label for="constraction" class="font-weight-bold">工事の希望</label><br> <input type="radio" value="true" name="work" id="work_true" class="constraction"> <label class="radio" for="work_true"><%= f.radio_button :work, "true" %>希望</label> <input type="radio" value="false" name="work" id="work_false" class="constraction"> <label class="radio" for="work_false"><%= f.radio_button :work, "false" %>無し</label> </div>

■出力されたHTML

<div class="form-group"> <label for="constraction" class="font-weight-bold">工事の希望</label> <br> <input type="radio" value="true" name="work" id="work_true" class="constraction"> <label class="radio" for="work_true"><input type="radio" value="true" name="work" id="work_true">希望</label> ::before <input type="radio" value="true" name="work" id="work_true"> 希望 ::after </label> <input type="radio" value="false" name="work" id="work_false" class="constraction"> <label class="radio" for="work_false"><input type="radio" value="false" name="work" id="work_false">無し</label> ::before <input type="radio" value="false" name="work" id="work_false"> 無し ::after </label> </div> <div id="work_on">...</div>

■Javascript

$(function () { // ラジオボタンを選択変更したら実行 $(".constraction input").change(function () { let val = $(this).val(); if (val == "true"){ $("#work_on").show(); } else { $("#work_on").hide(); }; }); });

■CSS(ラジオボタン装飾部分)

input[type=radio] { display: none; } .radio { box-sizing: border-box; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; position: relative; display: inline-block; margin: 0 15px 5px 0; padding: 8px 14px 8px 38px; border-radius: 8px; background-color: #f6f7f8; vertical-align: middle; cursor: pointer; } .radio:hover { background-color: #e2edd7; } .radio:hover:after { border-color: #e2edd7; } .radio:after { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; position: absolute; top: 50%; left: 15px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid #bbb; border-radius: 6px; content: ''; } .radio:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 45%; left: 18px; display: block; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #53b300; content: ''; opacity: 0; } input[type=radio]:checked + .radio:before { opacity: 1; } input[type="radio"]:checked + label { background: #e2edd7; color: #000000; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

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