:disabled【無効状態要素】
:enabled【有効状態要素】
メモ
- 無効状態 / 有効状態 要素を選択
- $( ":disabled" )・$( ":enabled" ) よりも $( "input:disabled" )・$( "input:enabled" )等 を推奨 ( "*:~" とみなされる)
- 選択対象
- $( "[disabled]" ) と $( ":disabled" ) の違い (例2 参照)
- $( "[disabled]" ):disabled 属性で判定
- $( ":disabled" ):親要素によって、有効状態であっても無効状態となる要素を含む
- $( ":not([disabled]" ) と $( ":enabled" ) の違い (例2 参照)
- $( ":not([disabled]" ):disabled 属性で判定
- $( ":enabled" ):親要素によって、有効状態であっても無効状態となる要素を含まない
構文
【無効状態 要素】
jQuery( ":disabled" ) 1.0
【有効状態 要素】
jQuery( ":enabled" ) 1.0
関連
例
【例1】
<div id="id1">
<p>
<button><button></button>
<button disabled><button disabled></button>
</p>
<p>
<input type="button" value='<input type="button">'>
<input type="button" disabled value='<input type="button" disabled>'>
</p>
<p>
<input type="text" value='<input type="text">'>
<input type="text" disabled value='<input type="text" disabled>'>
</p>
<p>
<label><input type="checkbox"><input type="checkbox></label>
<label><input type="checkbox" disabled><input type="checkbox" disabled></label>
</p>
<p>
<label><input type="radio" name="radio"><input type="radio" name="radio"></label>
<label><input type="radio" name="radio" disabled checked><input type="radio" name="radio" disabled checked></label>
</p>
<fieldset>
<legend><select>・<optgroup>・<option></legend>
<select size="10">
<optgroup label="グループA">
<option>項目1
<option disabled>項目2 (disabled)
</optgroup>
<optgroup disabled label="グループB (disabled)">
<option>項目3
<option disabled>項目4 (disabled)
</optgroup>
<option>項目5
<option disabled>項目6 (disabled)
</select>
<select disabled size="10">
<optgroup label="グループA">
<option>項目1
<option disabled>項目2 (disabled)
</optgroup>
<optgroup disabled label="グループB (disabled)">
<option>項目3
<option disabled>項目4 (disabled)
</optgroup>
<option>項目5
<option disabled>項目6 (disabled)
</select>
</fieldset>
<p>
<textarea><textarea></textarea>
<textarea disabled><textarea disabled></textarea>
</p>
<fieldset>
<legend><fieldset></legend>
<input value="<input>">
</fieldset>
<br>
<fieldset disabled>
<legend><fieldset disabled></legend>
<input value="<input>">
</fieldset>
</div>
<style>
.enabled1 { border:2px blue dashed; }
.disabled1 { border:2px red dashed; }
</style>
<script>
$( "#id1 :enabled" ).addClass("enabled1");
$( "#id1 input:enabled[type='checkbox']" ).wrap( "<span></span>" ).parent().addClass("enabled1");
$( "#id1 input:enabled[type='radio']" ).wrap( "<span></span>" ).parent().addClass("enabled1");
$( "#id1 :disabled" ).addClass("disabled1");
$( "#id1 input:disabled[type='checkbox']" ).wrap( "<span></span>" ).parent().addClass("disabled1");
$( "#id1 input:disabled[type='radio']" ).wrap( "<span></span>" ).parent().addClass("disabled1");
</script>
【例2】
<fieldset id="id21" disabled>
<legend><fieldset disabled> 【 $( "input[disabled]" ) 】</legend>
<input value="<input>">
<input disabled value="<input disabled>">
</fieldset>
<br>
<fieldset id="id22" disabled>
<legend><fieldset disabled> 【 $( ":disabled" ) 】</legend>
<input value="<input>">
<input disabled value="<input disabled>">
</fieldset>
<br>
<fieldset id="id23" disabled>
<legend><fieldset disabled> 【 $( ":not([disabled]" ) 】</legend>
<input value="<input>">
<input disabled value="<input disabled>">
</fieldset>
<br>
<fieldset id="id24" disabled>
<legend><fieldset disabled> 【 $( ":enabled" ) 】</legend>
<input value="<input>">
<input disabled value="<input disabled>">
</fieldset>
<style>
.enabled2 { border:2px blue dashed; }
.disabled2 { border:2px red dashed; }
</style>
<script>
$( "#id21 input[disabled]" ).addClass("disabled2");
$( "#id22 input:disabled" ).addClass("disabled2");
$( "#id23 input:not([disabled])" ).addClass("enabled2");
$( "#id24 input:enabled" ).addClass("enabled2");
</script>