JavaScript disabled属性でセレクトボックスを選択可能(不可)にするサンプル
環境
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」を選択可能になります。