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

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

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

該当のソースコード

view
1<div class="form-group">
2  <label for="work_status" class="font-weight-bold">工事の希望</label><br>
3  <label class="work_status" id="constraction" value="true"><%= f.radio_button :work, "true" %>希望</label>
4  <label class="work_status" id="constraction" value="false"><%= f.radio_button :work, "false" %>無し</label>
5</div>
6<div id="work_on"><%= render partial: 'works/work_on' %></div>

view
1$(function () {
2  // ラジオボタンを選択変更したら実行
3  $("#constraction").change(function () {
4    let val = $(this).val();
5
6    if (val == true){
7      $("#work_on").show();
8    } else {
9      $("#work_on").hide();
10    };
11  });
12});

出力された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==">

行動規範の内容に同意します

回答1件

ベストアンサー

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

js
1  // クラスにした場合
2  $(".constraction input").change(function () {
3    let val = $(this).val();
4
5    if (val == true){
6      $("#work_on").show();
7    } else {
8      $("#work_on").hide();
9    };
10  });