【JavaScript】セレクトボックスで特定の項目を選択した時のみテキストボックスを有効化する方法！

2023/05/15

お問い合わせフォームの作成時にアンケート的なセレクトボックスを構築し、「その他」という項目を選択したときだけ、詳細を入力する「input」フォームを有効化させる機能を実装することにしました。

その時のコードを残しておきます。

<select name="" id="select_b">
  <option disabled selected>選択してください</option>
  <option value="理由1">理由1</option>
  <option value="理由2">理由2</option>
  <option value="理由3">理由3</option>
  <option value="その他">その他</option>
</select>
<script>
    document.getElementById("select_b").addEventListener("change", function(){
    var select_elem = document.getElementById("select_b");
    var s_value = select_elem.options[select_elem.selectedIndex].value;
    var text_elem = document.getElementById("text_b");

    if(s_value == "その他"){
      text_elem.disabled = false;
    } else {
      text_elem.disabled = true;
    }
  }, false);
</script>

<input type="text" placeholder="詳細をご記入ください" name="" id="text_b" disabled>

簡単に実装可能ですので、試してみてください。

よかったらシェアしてね！