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