JavaScript disabled属性でセレクトボックスを選択可能(不可)にするサンプル

2022年11月25日

環境
Google Chrome　107.0.5304.107
Windows 10 Home 64bit

構文
1.チェックボックス要素を選択します
var 変数名 = document.getElementById(“チェックボックスのID名");

2.チェックボックスがONのときの判定処理
if(変数名.checked){処理コード}

3.セレクトボックスを選択不可にする
document.getElementById(セレクトボックスのID名).setAttribute(“disabled", true);

4.セレクトボックスを選択可能にする
document.getElementById(セレクトボックスのID名).removeAttribute(“disabled");

使用例

<!DOCTYPE html>
<html>
<body>

<script>
function funA() {
   //　チェックボックス「userid」を取得
　var cft = document.getElementById("userid");
  if (cft.checked) {　    // チェックボックスがONのときの処理
      //disabled属性を設定
       document.getElementById("city").setAttribute("disabled", true);
  } else {  // チェックボックスがOFFのときの処理
      // disabled属性を削除
      document.getElementById("city").removeAttribute("disabled");
  }
}
</script>
地方: <select id="city" name="city" >
   <option value="11">東京</option>
   <option value="22">大阪</option>
   <option value="33">福岡</option>
</select>
<p>選択 <input type="checkbox" id="userid" name="username" onchange="funA();"></p>

</body>
</html>

実行結果

選択チェックボックスを入れると、セレクトボックス「city」を選択不可になります。
選択チェックボックスのチェックを外れと、セレクトボックス「city」を選択可能になります。

JavaScript

Posted by arkgame

関連記事: