【jQuery】ラジオボタンのfalseにチェック入っていたら日付選択をさせないようにしたい

業務で特定の操作の締め切り期限機能を作る機会がありました。

締め切り設定は使う・使わないを選択でき、使う場合は締切日をselectで選択、使わない場合はselectをdisabledにするという処理です。

実装

railsアプリなのでjQueryは既に読み込んでいます。

まずはjQueryを使えるようにしましょう。

【html.erb】

<table class='formTable'>
      <tr>
        <th width="160"><%=f Deadline, :use %></th>
        <td>
          <%= radio_button :deadline, :use, true %>
          <%= label_tag 'deadline_use_true', t('.use_true') %>
          <%= radio_button :deadline, :use, false %>
          <%= label_tag 'deadline_use_false', t('.use_false') %>
        </td>
      </tr>
      <tr>
        <th><%=f Deadline, :deadline_date %></th>
        <td>
          <%= date_select :deadline, :deadline_date, use_month_numbers: true, date_separator: ' / ', start_year: Time.zone.now.year, end_year: Time.zone.now.year + 3 %>
          <%= error_messages_on :deadline, :deadline_date %>
        </td>
      </tr>
    </table>

【js】

<script type="text/javascript">
  $(function() {
    // 初期値をfalseに
    $('#deadline_use_false').prop('checked', true);

    // ページ読み込み時にfalseだったら日付を選択させない
    if ($('#deadline_use_false').prop('checked')) {
      $('#deadline_deadline_date_1i, #deadline_deadline_date_2i, #deadline_deadline_date_3i').prop('disabled', true);
    }

    // 使わないにチェックを入れたら日付選択させない
    $('#deadline_use_false').change(function() {
      $('#deadline_deadline_date_1i, #deadline_deadline_date_2i, #deadline_deadline_date_3i').prop('disabled', true);
    });

    // 使うにチェックを入れたら日付選択可能
    $('#deadline_use_true').change(function() {
      $('#deadline_deadline_date_1i, #deadline_deadline_date_2i, #deadline_deadline_date_3i').prop('disabled', false);
    });
  });
</script>

prop()とは、属性プロパティに値を設定、または設定されている値を取得します。

参考：.prop() | jQuery 1.9 日本語リファレンス | js STUDIO

動作はコメントの通りで、初期値にfalseを入れています（普段は使わない設定に）。

マウスで使う・使わないを選択したらselectをdisabledする・しないを切り替えられるように処理を入れています。

ただ、ページを読み込んだときはラジオボタンの値がfalseなのに日付のselectが使える状態になっているため、if文でselectを使えないようにする処理を噛ませています。

railsアプリを使っているとこういったdisabledにする処理はちょいちょい見かけるのでメモしておきました。

筆者オススメ技術書

リンク