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>
実行結果
ボタン「表示」を押すと、テキストボックスを無効にします。
再度ボタン「表示」を押すと、テキストボックスを有効にします。