:disabled【無効状態要素】
:enabled【有効状態要素】

メモ

構文

【無効状態 要素】
jQuery( ":disabled" ) 1.0

【有効状態 要素】
jQuery( ":enabled" ) 1.0

関連


【例1】
<div id="id1">
  <p>
  <button>&lt;button&gt;</button>
  <button disabled>&lt;button disabled&gt;</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">&lt;input type="checkbox&gt;</label>
  <label><input type="checkbox" disabled>&lt;input type="checkbox" disabled&gt;</label>
  </p>
  
  <p>
  <label><input type="radio" name="radio">&lt;input type="radio" name="radio"&gt;</label>
  <label><input type="radio" name="radio" disabled checked>&lt;input type="radio" name="radio" disabled checked&gt;</label>
  </p>
  
  <fieldset>
  <legend>&lt;select&gt;・&lt;optgroup&gt;・&lt;option&gt;</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>&lt;textarea&gt;</textarea>
  <textarea disabled>&lt;textarea disabled&gt;</textarea>
  </p>
  
  <fieldset>
    <legend>&lt;fieldset&gt;</legend>
    <input value="<input>">
  </fieldset>
  <br>
  <fieldset disabled>
    <legend>&lt;fieldset disabled&gt;</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>

<select>・<optgroup>・<option>

<fieldset>

<fieldset disabled>


【例2】
<fieldset id="id21" disabled>
  <legend>&lt;fieldset disabled&gt; 【 $( "input[disabled]" ) 】</legend>
  <input value="<input>">
  <input disabled value="<input disabled>">
</fieldset>
<br>
<fieldset id="id22" disabled>
  <legend>&lt;fieldset disabled&gt; 【 $( ":disabled" ) 】</legend>
  <input value="<input>">
  <input disabled value="<input disabled>">
</fieldset>
<br>
<fieldset id="id23" disabled>
  <legend>&lt;fieldset disabled&gt; 【 $( ":not([disabled]" ) 】</legend>
  <input value="<input>">
  <input disabled value="<input disabled>">
</fieldset>
<br>
<fieldset id="id24" disabled>
  <legend>&lt;fieldset disabled&gt; 【 $( ":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>

<fieldset disabled> 【 $( "input[disabled]" ) 】

<fieldset disabled> 【 $( ":disabled" ) 】

<fieldset disabled> 【 $( ":not([disabled]" ) 】

<fieldset disabled> 【 $( ":enabled" ) 】