JavaScript 要素を活性/非活性にするサンプル(disabled)

JavaScriptの要素を活性または非活性にするサンプルです。
disabledまたはreadOnlyを使用します。

活性/非活性 ボタンを非活性にする(disabled)
  テキストボックスを非活性にする(disabled)
  テキストボックスを非活性にする(readOnly)
  disabledとreadOnlyの違い

ボタンを非活性にする(disabled)

「活性/非活性」のボタンを押すと「ボタン」が活性と非活性で切り替わります。
非活性のとき、ボタンは押せません。

コード

上記サンプルのコードです。

<input type="button" id="b1" value="ボタン">
<input type="button" value="活性/非活性" onclick="clickBtn1()">

<script>
function clickBtn1(){
	
	if (document.getElementById("b1").disabled === true){
		// disabled属性を削除
		document.getElementById("b1").removeAttribute("disabled");
		document.getElementById("b1").style.color = "black";
	}else{
		// disabled属性を設定
		document.getElementById("b1").setAttribute("disabled", true);
		document.getElementById("b1").style.color = "White";
	}
}
</script>

2行目のボタンをクリックすると5行目の関数を実行します。
7行目は、disabledになっているか確認しています。
9行目は、disabled属性を削除しています。
10行目は、文字の色を黒にしています。
13行目は、属性にdisabledをtrueで追加しています。
14行目は、文字の色を白にしています。

テキストボックスを非活性にする(disabled)

「活性/非活性」のボタンを押すとテキストボックスが活性と非活性で切り替わります。
非活性のとき、テキストボックスに入力できません。

コード

上記サンプルのコードです。

<input type="textbox" id="b2" value="テキスト" maxlength="5">
<input type="button" value="活性/非活性" onclick="clickBtn2()">

<script>
function clickBtn2(){
	
	if (document.getElementById("b2").disabled === true){
		// disabled属性を削除
		document.getElementById("b2").removeAttribute("disabled");
		document.getElementById("b2").style.color = "black";
	}else{
		// disabled属性を設定
		document.getElementById("b2").setAttribute("disabled", true);
		document.getElementById("b2").style.color = "White";
	}
}
</script>

2行目のボタンをクリックすると5行目の関数を実行します。
7行目は、disabledになっているか確認しています。
9行目は、disabled属性を削除しています。
10行目は、文字の色を黒にしています。
13行目は、属性にdisabledをtrueで追加しています。
14行目は、文字の色を白にしています。

テキストボックスを非活性にする(readOnly)

「活性/非活性」のボタンを押すとテキストボックスが活性と非活性で切り替わります。
非活性のとき、テキストボックスに入力できません。この非活性は、readOnlyです。

コード

上記サンプルのコードです。

<input type="textbox" id="b3" value="テキスト" maxlength="5">
<input type="button" value="活性/非活性" onclick="clickBtn3()">

<script>
function clickBtn3(){
	
	if (document.getElementById("b3").readOnly === true){
		// readonly属性を削除
		document.getElementById("b3").removeAttribute("readOnly");
		document.getElementById("b3").style.background = "white";
		document.getElementById("b3").style.color = "black";
	}else{
		// readonly属性を設定
		document.getElementById("b3").setAttribute("readOnly", true);
		document.getElementById("b3").style.background = 'rgb(235,235,228)';
		document.getElementById("b3").style.color = 'rgb(255,255,255)';
	}
}
</script>      

2行目のボタンをクリックすると5行目の関数を実行します。
7行目は、readOnlyになっているか確認しています。
9行目は、readOnly属性を削除しています。
10行目は、背景色を白にしています。
11行目は、文字の色を黒にしています。
14行目は、属性にreadOnlyをtrueで追加しています。
15行目は、背景色を灰色にしています。
16行目は、文字の色を白にしています。

disabledとreadOnlyの違い

両方ともユーザーからの入力は不可です。
WebシステムでPost送信したとき、disabledは値が送信されません。readOnlyは値が送信されます。

関連の記事

JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)

△上に戻る