element.disabledは、「element」に指定した要素のdisabled属性の値を取得、もしくは、設定するプロパティ。
要素のdisabled属性の値を「true」に設定すると、要素を無効にできる。ボタンなどの要素の有効/無効を切り替えたいときに使う。
構文
取得
var $disabled = $elementNodeReference.disabled;
戻り値
指定した要素のdisabled属性の値。
- 要素が有効であれば「false」を返す。
- 要素が無効であれば「true」を返す。
設定
$elementNodeReference.disabled = false/true;
- 要素を有効にする場合、「false」を指定する。
- 要素を無効にする場合、「true」を指定する。
サンプル
disabled：
サンプルの動作について
「クリックすると無効になるボタン」のボタンをクリックすると、ボタンが無効になる。「disabled：」の右横の「false」が「true」に変わる。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = getDisabled;
function getDisabled() {
var $elementNodeReference = document.getElementById( "sample" );
var $disabled = $elementNodeReference.disabled;
document.getElementById( "sampleOutput1" ).innerHTML = $disabled;
}
function getAndSetDisabled() {
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.disabled = true;
document.getElementById( "sampleOutput1" ).innerHTML = $elementNodeReference.disabled;
}
</script>
window.onload = getDisabled;
function getDisabled() {
var $elementNodeReference = document.getElementById( "sample" );
var $disabled = $elementNodeReference.disabled;
document.getElementById( "sampleOutput1" ).innerHTML = $disabled;
}
function getAndSetDisabled() {
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.disabled = true;
document.getElementById( "sampleOutput1" ).innerHTML = $elementNodeReference.disabled;
}
</script>
HTML
<button id="sample" onclick="getAndSetDisabled();">クリックすると無効になるボタン</button>
<p>disabled：<span id="sampleOutput1"></span></p>
<p>disabled：<span id="sampleOutput1"></span></p>