入力フォームの入力有効・無効制御について

Question

入力フォームをコーディングしているのですが、以下の条件を入れて入力制御するように言われているんですが、参考サイトなども見つからずに困っています。
（jsを書ける能力がないため、全く同じ条件の参考サイトが見つからないとコピペして使えない）

jsまたはjqueryなどでどう書けばいいのか教えていただけると助かります。

条件

来場予定日を選択したら、来場予定時間と来場者人数のセレクトボックスが有効になるようにする。
初期状態は来場予定日だけが有効で、来場予定時間と人数は入力無効（グレーアウト）状態にする。

現在のHTML

<!-- 来場予定日 -->
<div class="frm-col">
 <table>
  <tbody>
   <tr>
    <td>
     <div class="frm-list col1">
      <div class="pull">
       <select name="date">
        <option value="" selected >選択してください</option>
        <option value="">2021/1/1</option>
        <option value="">2021/1/1</option>
       </select>
      </div>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<!-- /来場予定日 -->

<!-- 来場時間 -->
<div class="frm-col">
 <table>
  <tbody>
   <tr>
    <td>
     <div class="frm-list col1">
      <div class="pull">
       <select name="time" class="placeholder" >
        <option value="" selected>選択してください</option>
        <option value="">11:00 – 11:30</option>
        <option value="">11:30 – 12:00</option>
        <option value="">12:00 – 12:30</option>
       </select>											 
      </div>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<!-- /来場時間 -->

<!-- 来場者人数 -->
<div class="frm-col">
 <table>
  <tbody>
   <tr>
    <td>
     <div class="frm-list col3">
      <div class="pull">
       <select name="person">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
       </select>
      </div>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<!-- /来場者人数 -->

Comments

[m.ts10806]

>言われているんですが
指示者、依頼者に確認してください。

Answer 1

正しく検証していません・・・
使いこなせるといいのですが・・・

class A {
  constructor (selects, begin = 0, end = selects.length) {
    this.selects = selects;
    this.end = end;
    this.begin = begin;
  }

  set begin (n) {
    this.selects.forEach ((s, i)=> s.disabled = n < i && this.end > i);
  }

  handleEvent (event) {
    let i = this.selects.indexOf (event.target);
    if (-1 < i)
      this.begin = i + (this.selects[i].selectedIndex != 0) * 1;
  }

  static create ([...selects], begin = 0, end = selects.length) {
    const obj = new this (selects, begin, end);
    document.addEventListener ('change', obj, true);
  }
}

A.create (document.querySelectorAll ('select'));//ここに関連したSELECT要素を配列で指定します

Comments

[mariko76]

ありがとうございました＞＜

Answer 2

$(function(){
  $('[name="date"]').on('change',function(){
    $('[name="time"],[name="person"]').prop('disabled',$(this).prop('selectedIndex')==0);
  }).trigger('change');
});

selectのoptionにはきちんとvalueを設定してください

Comments

[mariko76]

ありがとうございます、無事できました！！