JavaScript フォームへの入力を禁止・許可する
テキストフィールドへの入力を禁止するには、「disabled」プロパティに「true」を設定します。falseを設定すると、入力が可能な状態になります。disabledプロパティはテキストフィールドだけでなく、ラジオボタンやチェックボックス、セレクトメニューに対しても有効です。なお、form要素にはdisabledプロパティではないため、一括してすべての要素の入力を禁止にすることはできません。
<body>
<script>
window.addEventListener("load" , function(){
var myField = document.getElementById("uname");
var dBtn = document.getElementById("disBtn");
var eBtn = document.getElementById("enaBtn");
//入力禁止ボタンのイベント
dBtn.addEventListener("click", function(evt){
myField.disabled = true;
}, false);
//入力許可ボタンのイベント
eBtn.addEventListener("click", function(evt){
myField.disabled = false;
}, false);
}, false);
</script>
<form name="selectFoods">
<p><input type="text" id="uname" value="KF" placeholder="名前を入力してください。"></p>
<input type="button" value="入力を禁止" id="disBtn">
<input type="button" value="入力を許可" id="enaBtn">
</form>
<output></output>
</body>入力を禁止するボタンをクリックすると、テキストフィールドへの入力ができなくなります。
テキストフィールドへの入力が可能になります。
