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

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

ただいまの
回答率

87.48%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 447

score 28

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

ラジオボタンでvalueがtrueの時は表示、falseの時は非常時としたいです。
切り替えたいフォームをrenderで分けたのですが、ページ読み込み時にボタンを切り替えた一回しか反応しません。
またモデルでデフォルトをfalseにしていますが、false(ページ更新時)の時にフォームが表示され、trueにボタンを変更すると非常時となってしまいます。

該当のソースコード

<div class="form-group">
  <label for="work_status" class="font-weight-bold">工事の希望</label><br>
  <label class="work_status" id="constraction" value="true"><%= f.radio_button :work, "true" %>希望</label>
  <label class="work_status" id="constraction" value="false"><%= f.radio_button :work, "false" %>無し</label>
</div>
<div id="work_on"><%= render partial: 'works/work_on' %></div>
$(function () {
  // ラジオボタンを選択変更したら実行
  $("#constraction").change(function () {
    let val = $(this).val();

    if (val == true){
      $("#work_on").show();
    } else {
      $("#work_on").hide();
    };
  });
});


出力されたHTML

<label class="work_status" id="constraction" value="true"><input type="radio" value="true" name="work[work]" id="work_work_true">希望</label>
  <input type="radio" value="true" name="work[work]" id="work_work_true">
  "希望"
</label>

<label class="work_status" id="constraction" value="false"><input type="radio" value="false" checked="checked" name="work[work]" id="work_work_false">無し</label>
  <input type="radio" value="false" checked="checked" name="work[work]" id="work_work_false">
  "無し"
</label>

<div id="work_on" style="display: none;"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="UvSRcZ9HT53PIoDgH3pv32WhWYt6kCiS5u9Rnxt0ZrSmYuzmePk7cI/RIiuQSEUoH6tgRHASKEVekzdIpZVTMA==">
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

label要素にvalue属性は無いので、input要素を確認するようにしてください。また、同一HTMLの中に同じidは存在できないので、別名にするかclassにしましょう。

  // クラスにした場合
  $(".constraction input").change(function () {
    let val = $(this).val();

    if (val == true){
      $("#work_on").show();
    } else {
      $("#work_on").hide();
    };
  });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/15 09:55

    アドバイスいただいたようにclassにして修正したら出来ました!
    ありがとうございます!

    キャンセル

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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