JavaScript disabledでテキストボックスを無効または有効にするサンプル

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122

構文
1.ボタンのonclickイベントの定義
document.getElementById('ボタンのID名’).onclick = function(){処理コード}
2.テキストボックスを無効にします
document.getElementById(“テキストボックスのID名).disabled = false;
3.テキストボックスを有効にします
document.getElementById(“テキストボックスのID名").disabled = true;

使用例

<!DOCTYPE html>
<html>
<body>
<div id="content">
    <label for="name">名前:</label>
    <input type="text" id="username" name="username">
</div>
<br>
<button id="show">表示</button>

<script>

document.getElementById('show').onclick = function(){
    var flg = document.getElementById("username").disabled;
    if(flg) {
      document.getElementById("username").disabled = false;
    } else {
     document.getElementById("username").disabled = true;
    }

}
</script>

</body>
</html>

実行結果
ボタン「表示」を押すと、テキストボックスを無効にします。
再度ボタン「表示」を押すと、テキストボックスを有効にします。

JavaScript

Posted by arkgame