optionObject.disabledは、選択肢（option要素）のdisabled属性の値を取得、もしくは、設定するプロパティ。
disabled属性には、選択肢（option要素）を無効にするかしないかを指定できる。
無効にした選択肢（option要素）のデータは、フォーム送信時の送信データに含めない。
構文
取得
var $disabled = $optionElementReference.disabled;
戻り値
- 無効な選択肢（option要素）であれば、
trueを返す。 - 有効な選択肢（option要素）であれば、
falseを返す。
設定
$optionElementReference.disabled = boolean;
- boolean
- 無効にするかどうかを指定。
true：無効にする。false：無効にしない。
サンプル
- 選択肢１：
- 選択肢２：
- 選択肢３：
- 選択肢４：
- 選択肢５：
サンプルの動作について
- 「選択肢１：」から「選択肢５：」の各「無効化」ボタンをクリックすると、その選択肢を無効化する。
- 「選択肢１：」から「選択肢５：」の各「有効化」ボタンをクリックすると、その選択肢を有効化する。
- 「選択肢１：」から「選択肢５：」の各右横には、各選択肢が無効であれば「true」、有効であれば「false」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setDisabled( $index, $disabled ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.options[$index].disabled = $disabled;
getDisabled();
}
function getDisabled() {
var $elementReference = document.getElementById( "sample" );
for( var $index = 0; $index < $elementReference.options.length; $index++ ){
document.getElementById( "sampleOutput" + ( $index + 1 ) ).innerHTML = $elementReference.options[$index].disabled;
}
}
window.onload = function () {
getDisabled();
}
</script>
function setDisabled( $index, $disabled ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.options[$index].disabled = $disabled;
getDisabled();
}
function getDisabled() {
var $elementReference = document.getElementById( "sample" );
for( var $index = 0; $index < $elementReference.options.length; $index++ ){
document.getElementById( "sampleOutput" + ( $index + 1 ) ).innerHTML = $elementReference.options[$index].disabled;
}
}
window.onload = function () {
getDisabled();
}
</script>
HTML
<form id="sampleForm" method="get" action="http://alphasis.info/2014/02/javascript-dom-option-disabled/" target="_blank">
<p>
ドロップダウンリスト：
<select id="sample" name="sampleName" multiple>
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" disabled>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
<input type="submit" value="送信">
</p>
</form>
<ul>
<li>
選択肢１：
<span id="sampleOutput1"></span>
<button onclick="setDisabled(0,true);">無効化</button>
<button onclick="setDisabled(0,false);">有効化</button>
</li>
<li>選択肢２：
<span id="sampleOutput2"></span>
<button onclick="setDisabled(1,true);">無効化</button>
<button onclick="setDisabled(1,false);">有効化</button>
</li>
<li>選択肢３：
<span id="sampleOutput3"></span>
<button onclick="setDisabled(2,true);">無効化</button>
<button onclick="setDisabled(2,false);">有効化</button>
</li>
<li>選択肢４：
<span id="sampleOutput4"></span>
<button onclick="setDisabled(3,true);">無効化</button>
<button onclick="setDisabled(3,false);">有効化</button>
</li>
<li>選択肢５：
<span id="sampleOutput5"></span>
<button onclick="setDisabled(4,true);">無効化</button>
<button onclick="setDisabled(4,false);">有効化</button>
</li>
</ul>
<p>
ドロップダウンリスト：
<select id="sample" name="sampleName" multiple>
<option value="選択肢１">選択肢１</option>
<option value="選択肢２">選択肢２</option>
<option value="選択肢３" disabled>選択肢３</option>
<option value="選択肢４">選択肢４</option>
<option value="選択肢５">選択肢５</option>
</select>
<input type="submit" value="送信">
</p>
</form>
<ul>
<li>
選択肢１：
<span id="sampleOutput1"></span>
<button onclick="setDisabled(0,true);">無効化</button>
<button onclick="setDisabled(0,false);">有効化</button>
</li>
<li>選択肢２：
<span id="sampleOutput2"></span>
<button onclick="setDisabled(1,true);">無効化</button>
<button onclick="setDisabled(1,false);">有効化</button>
</li>
<li>選択肢３：
<span id="sampleOutput3"></span>
<button onclick="setDisabled(2,true);">無効化</button>
<button onclick="setDisabled(2,false);">有効化</button>
</li>
<li>選択肢４：
<span id="sampleOutput4"></span>
<button onclick="setDisabled(3,true);">無効化</button>
<button onclick="setDisabled(3,false);">有効化</button>
</li>
<li>選択肢５：
<span id="sampleOutput5"></span>
<button onclick="setDisabled(4,true);">無効化</button>
<button onclick="setDisabled(4,false);">有効化</button>
</li>
</ul>