JavaScript onchangeメソッドでチェックボックスの入力イベントを実装するサンプル

環境
Google Chrome 107.0.5304.107
Windows 10 Home 64bit

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

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

3.readonly属性設定
document.getElementById(セレクターID名).setAttribute(“readOnly", true);

4.readonly属性を削除
document.getElementById(セレクターID名).removeAttribute(“readOnly");

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<script>
function funA() {
// チェックボックス「userid」を取得
 var cft = document.getElementById("userid");
if (cft.checked) {  // チェックボックスがONのときの処理
//readonly属性を設定
document.getElementById("city").setAttribute("readOnly", true);
//背景色をgrayに設定
document.getElementById("city").style.background ="gray";
//文字の色を青に設定
document.getElementById("city").style.color="blue";
} else { // チェックボックスがOFFのときの処理
// readonly属性を削除
document.getElementById("city").removeAttribute("readOnly");
//背景色をgrayに設定
document.getElementById("city").style.background ="white";
//文字の色を青に設定
document.getElementById("city").style.color="red";
}
}
</script>
名前:<input type="textbox" id="city" value="東京" maxlength="5">
<p>選択 <input type="checkbox" id="userid" name="username" onchange="funA();"></p>
</body>
</html>
<!DOCTYPE html> <html> <body> <script> function funA() { // チェックボックス「userid」を取得  var cft = document.getElementById("userid"); if (cft.checked) {  // チェックボックスがONのときの処理 //readonly属性を設定 document.getElementById("city").setAttribute("readOnly", true); //背景色をgrayに設定 document.getElementById("city").style.background ="gray"; //文字の色を青に設定 document.getElementById("city").style.color="blue"; } else { // チェックボックスがOFFのときの処理 // readonly属性を削除 document.getElementById("city").removeAttribute("readOnly"); //背景色をgrayに設定 document.getElementById("city").style.background ="white"; //文字の色を青に設定 document.getElementById("city").style.color="red"; } } </script> 名前:<input type="textbox" id="city" value="東京" maxlength="5"> <p>選択 <input type="checkbox" id="userid" name="username" onchange="funA();"></p> </body> </html>
<!DOCTYPE html>
<html>
<body>

<script>
function funA() {
   // チェックボックス「userid」を取得
 var cft = document.getElementById("userid");
  if (cft.checked) {     // チェックボックスがONのときの処理
      //readonly属性を設定
       document.getElementById("city").setAttribute("readOnly", true);
      //背景色をgrayに設定
    document.getElementById("city").style.background ="gray";
      //文字の色を青に設定
    document.getElementById("city").style.color="blue";
  } else {  // チェックボックスがOFFのときの処理
       // readonly属性を削除
      document.getElementById("city").removeAttribute("readOnly");
       //背景色をgrayに設定
      document.getElementById("city").style.background ="white";
      //文字の色を青に設定
      document.getElementById("city").style.color="red";
  }
}
</script>
名前:<input type="textbox" id="city" value="東京" maxlength="5">
<p>選択 <input type="checkbox" id="userid" name="username" onchange="funA();"></p>

</body>
</html>

実行結果

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
選択チェックボックスを入れると、テキストボックス「city」を非活性にします。テキストボックスの背景色をグレーにします。
選択チェックボックスを外すと、テキストボックス「city」を活性にします。テキストボックスの背景色を白にします。
選択チェックボックスを入れると、テキストボックス「city」を非活性にします。テキストボックスの背景色をグレーにします。 選択チェックボックスを外すと、テキストボックス「city」を活性にします。テキストボックスの背景色を白にします。
選択チェックボックスを入れると、テキストボックス「city」を非活性にします。テキストボックスの背景色をグレーにします。
選択チェックボックスを外すと、テキストボックス「city」を活性にします。テキストボックスの背景色を白にします。

 

JavaScript

Posted by arkgame