jQuery <その他リファレンス メモ> 言語 等 CSSHTML JavaScriptPython ライブラリ・プラットフォーム jQuerymicro:bit Xamarin ドキュメンテーション DoxygenJSDoc MarkdownSHFB XML ドキュメント コメント その他 各種資料 子サイト 簡易リファレンス・Tips サポート寄付 セレクタ (Selectors) :disabled【無効状態要素】・:enabled【有効状態要素】 :disabled【無効状態要素】:enabled【有効状態要素】 メモ無効状態 / 有効状態 要素を選択 $( ":disabled" )・$( ":enabled" ) よりも $( "input:disabled" )・$( "input:enabled" )等 を推奨 ( "*:~" とみなされる) 選択対象 HTML5:<button>【ボタン】 HTML5:<fieldset>【コントロールのグループ化】 HTML5:<input>【汎用入力コントロール】 HTML5.1:<menuitem>【メニュー項目】 HTML5:<optgroup>【選択項目のグループ化】 HTML5:<option>【選択リストの選択項目】 HTML5:<select>【選択リスト】 HTML5:<textarea>【複数行入力コントロール】 $( "[disabled]" ) と $( ":disabled" ) の違い (例2 参照) $( "[disabled]" ):disabled 属性で判定 $( ":disabled" ):親要素によって、有効状態であっても無効状態となる要素を含む $( ":not([disabled]" ) と $( ":enabled" ) の違い (例2 参照) $( ":not([disabled]" ):disabled 属性で判定 $( ":enabled" ):親要素によって、有効状態であっても無効状態となる要素を含まない 構文 【無効状態 要素】 jQuery( ":disabled" ) 1.0 【有効状態 要素】 jQuery( ":enabled" ) 1.0 関連HTML5 リファレンス メモ <button>【ボタン】 <fieldset>【コントロールのグループ化】 <input>【汎用入力コントロール】 <menuitem>【メニュー項目】 <optgroup>【選択項目のグループ化】 <option>【選択リストの選択項目】 <select>【選択リスト】 <textarea>【複数行入力コントロール】 CSS リファレンス メモ :disabled【使用不可要素】 :enabled【使用可能要素】 jQuery (英語) :disabled Selector :enabled Selector 例 【例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> <button><button disabled> <input type="checkbox> <input type="checkbox" disabled> <input type="radio" name="radio"> <input type="radio" name="radio" disabled checked> <select>・<optgroup>・<option>項目1項目2 (disabled) 項目3項目4 (disabled) 項目5項目6 (disabled) 項目1項目2 (disabled) 項目3項目4 (disabled) 項目5項目6 (disabled) <textarea> <textarea disabled> <fieldset> <fieldset disabled> 【例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> <fieldset disabled> 【 $( "input[disabled]" ) 】 <fieldset disabled> 【 $( ":disabled" ) 】 <fieldset disabled> 【 $( ":not([disabled]" ) 】 <fieldset disabled> 【 $( ":enabled" ) 】