ywork2020.com

Title

要素を無効化する

目次 (INDEX)

disabled とは

ここで説明する disabled とは次の語句からなる HTML 要素の属性です。
disable
読み: ディセーブル
意味: 無効にする、使えなくする

目次に戻る

disabled 属性の概要

この属性は、コントロール要素を無効化します。

コントロール要素は disabled を付与することで、ユーザーからの入力や選択などを受け付けなくなります。

disabled 属性の値は Boolean 型 ( 論理型 ) とよばれ、true (真) か false (偽) の二者択一の値となることから「 真偽値 」と言ったりします。 例えば、disabled = true の意味は 「 無効である 」 となりますし、disabled = false なら 「 無効でない 」 という意味となります。

この属性が使用できる要素は以下の通りです。
buttoninputtextareaselect
optionoptgroupkeygenfieldset

目次に戻る

サンプルコードと実行結果

このサンプルでは、input 要素の button 型に disabled を付けて無効にしています。

また、JavaScript を使って disabled の論理値を切り替えるコードも掲載しておきます。

サンプルコード: HTML
<body>
	<p>
		<input type="checkbox" id="idCheckbox" onclick="funCheck()">
	</p>
	<p>
		<input type="button" value="サンプルボタン" id="idButton" disabled>
	</p>
	<script>...</script>
</body>
サンプルコード: script
<script>
	function funCheck(){
		if(idCheckbox.checked == true){
			document.getElementById("idButton").disabled = false;
		}
		else{
			document.getElementById("idButton").disabled = true;
		}
	}
</script>
実行結果:

チェックボックス: id="idCheckbox"
idButton の disabled 属性の true / false を切り替える [ ]

サンプルボタン: id="idButton"

このボタンはサンプルなので特別な機能はありません。

目次に戻る