form内のタグの条件分岐の方法に関して

Question

現在、お問い合わせフォームを作成しており、
「勤務期間」の箇所に「現在も勤務中」ボタンをつけたいと考えております。

現在も勤務中ボタンを押下すると、勤務期間の終了箇所がグレーアウトし、入力できないような仕様を考えているのですが、こちらの実装方法が不明なため質問させて頂きました。

該当ソースコードはこちらになります。
何卒ご教示の程よろしくお願い致します。

<span class="text">勤務期間 <span class="req">※</span></span>
          <div class="input_area">
            <select class="w120" name="period_y1" required>
              <option value=""></option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
              <option value="2021">2021</option>
            </select>
            <span class="s_text in_block">年</span>
            <input class="w80 mb20" type="text" name="period_m1" required><span class="s_text in_block">月</span><br class="sponly">
            <span class="s_text in_block mr30">～</span>
            <select class="w120" name="period_y2" required>
              <option value=""></option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
              <option value="2021">2021</option>
            </select>
            <span class="s_text in_block">年</span>
            <input class="w80" type="text" name="period_m2" required><span class="s_text in_block">月</span>
            ?>
          </div>

Comments

[m.ts10806]

まず思ったように書いてみてください。
何一つ手を付けられない、調べもつかないのでしたら基礎が足りないと判断できます。
また、質問タグはそれぞれどのように関係するのでしょう。

Answer 1

まずは、
JavaScript フォーム 無効化 連動
あたりで調べて実装してみる→不明な点を絞って質問しなおす。
という流れをお勧めします。
（調べてもわからないという話であれば、何をどう調べて＆試して、分からないことが何かを明確にするところから始めてみてください）

現在も勤務中ボタンを押下すると、勤務期間の終了箇所がグレーアウトし、入力できないような仕様を考えているのですが、こちらの実装方法が不明なため質問させて頂きました。

考え方としては、
0. 勤務期間の終了日時を無効化する関数を作成する

1. 「現在も勤務中ボタン」のonClickイベントをイベントリスナーに追加し、1で作成した関数を実行するようにする or onClick属性を使って1で作成した関数を実行する

と言う感じです。
＊質問中のUIだと一旦無効にしちゃうと元に戻せないので、その辺をどうするかは他のサイトでの実装等を参考にするなどして考えてみてください。