JavaScript disabledプロパティでテキストボックスを書き込み不可(可)にするサンプル

2022年10月28日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
const 変数名 = document.getElementById(テキストボックスのセレクターid);
書き込みを不可にする
変数名.disabled = true
書き込みを可能にする
変数名.disabled = false;

使用例

<!DOCTYPE html>
<html>
<body>
名前: <input type="text" value="tokyo" id="name" maxlength="5" />
<p><input type="button" value="検証" onclick="funA()" /></p>

<script>
  function funA() {
   const td = document.getElementById("name");
    if(td.disabled == false){
      //テキストボックスの書き込みを不可
      td.disabled = true;
    } else {
    // テキストボックスの書き込みを可能
     td.disabled = false;
    }
  }
</script>

</body>
</html>

結果
「検証」ボタンを押すとテキストボックスの書き込みを不可にしています。
再度「検証」ボタンを押すと、テキストボックスを書き込み可能にします。

JavaScript

Posted by arkgame

関連投稿: