JavaScript disabledプロパティでテキストボックスを書き込み不可(可)にするサンプル
環境
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>
<!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>
<!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>
結果
「検証」ボタンを押すとテキストボックスの書き込みを不可にしています。
再度「検証」ボタンを押すと、テキストボックスを書き込み可能にします。