フォームでドロップダウンを使用時に特定の選択肢が選ばれたら出す入力欄を入力必須にする方法（jQuery）

やりたいこと

今回やりたかったのはドロップダウンメニューで「その他」が選ばれた時に表示する入力欄を入力必須にするためにrequiredをつけること。

その他を選択するまではこの入力欄はtype="hidden"のため、最初からrequiedをつけるとフォームの挙動がおかしくなり送信されない。その辺はこれを読むと理解がしやすい。https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

そこでjQueryを使って入力欄が出たタイミングでrequiedをつけることにした。今後この入力欄のことを隠し入力欄と呼ぶことにする。

実装方法

前提：bootstrap4を使用している。

ドロップダウンメニュー

<select class="form-control form-control-lg" id="inputState" name="〇〇" type="text" required>
   <option value="〇〇">〇〇</option>
   <option value="〇〇">〇〇</option>
   <option value="〇〇">〇〇</option>
   <option value="その他">その他</option>
</select>

隠し入力欄

<input class="form-control form-control-lg" id="tr_writer" name="職種_その他" type="hidden" placeholder="職種を入力 [必須]"></input>

使用したjQuery

$("#inputState").change(function() {
 var extraction_val = $("#inputState").val();
 if(extraction_val == "その他") {
  $('#tr_writer').attr({
     type: 'text',
     required: ""
  })
 }
});

これで実現する。jQueryについてはコードを見ればなんとなくわかる程度なのでもっと勉強したい。