無効状態

disabled 属性 (フォーム制御子)、無効 (フォーム制御子)、:disabled 擬似クラス (選択子)、:enabled 擬似クラス (選択子)

仕様書

フォーム制御子系要素 disable 属性

[2] HTML のフォーム制御子系要素の disabled 属性は、 その制御子の利用者入力を無効にします。

[14]

要素型
button, input, optgroup, option, select, textarea, fieldset, optgroup, option
属性名
disabled (disalbed (無効) より)
属性値
ブール型属性 (>>4)
既定値
(>>4)

[3] 仕様書:

[11] HTML 4 DTD の注釈 (参考) には unavailable in this context と説明があります。

属性値

[4] この属性は真偽値属性です。指定すれば真 (無効)、 指定しなければ偽 (有効) です。

[5] この属性は継承しますが、局所宣言が継承値を上書きします HTML 4 17.12.1。 この規定が適用されるのは、メニュー選択制御子 (select) の場合と推定されます。

[15] fieldsetdisabled されると、その子孫フォーム制御子は、 すべて disabled となります。 WF2 2.5

UA による利用

[6] 無効化された制御子は、

  • 焦点を受取りません。 HTML 4 17.12.1
  • タブ navigation (tabindex 参照。) で飛ばされます。 HTML 4 17.12.1
  • 成功できません。 HTML 4 17.12.1
  • レンダリングは UA 依存です。HTML 4 17.12.1
    • 例: メニュー項目やボタンの名札を灰化する。 HTML 4 17.12.1

[16] 利用者エージェントは、

を無効化しなければなりませんWF2 2.5

[17] >>16 を厳密に解釈すると、 フォーム制御子でない optionoptgroupfieldset は無効化されず、 フォーム制御子である (が disabled は持たない) output は無効化されることになってしまいますが、 fieldsetoutput に対して有効・無効ということはあまり意味がありませんし、 optionoptgroupselect子孫でない限り、 やはり有効・無効にあまり意味はないので、 特に問題はなさそうです。

実装

[12] CSS Attribute selector bug - My Opera Forums http://my.opera.com/forums/showthread.php?threadid=96113

[18] IE7以下でもdisabled 属性を利用できるようになる「select-option-disabled-emulation.js」-JavaScript Library Archive ( 版) http://javascript.webcreativepark.net/library/select-option-disabled-emulation

他との関係

[7] HTML 的には有効・無効を動的に切り替える方法がなく、 スクリプトを使うことになっています。 HTML 4 17.12.1

[8] 似たような属性として readonly があります。利用者の入力を受け付けないという意味では disabled と同じですが、 readonly な制御子は成功するなどの違いがあります。

アクセス可能性・可用性・安全性

[10] この属性は、例えば、必須の項目が入力されるまで提出ボタンを無効にする、 といったような目的で使うことができます HTML 4 17.12.1。 しかし、 HTML だけでは有効・無効状態を動的に切り替えることができませんから、 その機能はスクリプトによって実現する必要があります。

このような場合、初期状態では必須の項目が未入力の状態であるとすると、 提出ボタンの初期状態も無効となるべきです。 従って、 HTML 文書に直接 <input type="submit" disabled> と指定しておきたくなります。しかし、 これは好ましくありません。なぜなら、 スクリプトが使えない UA やスクリプトを無効にしている利用者は、 この提出ボタンを押してフォームを提出しておくことができなくなってしまいます。

ですから、 HTML 文書の記述は

<input type="submit">

にとどめておき、スクリプトによって最初にこのボタンを無効化するという方法を採るべきです。

[9] 無効な文章入力制御子の例 HTML 4 17.12.1

<INPUT disabled name="fred" value="stone">

この例では、この制御子は通常レンダリングされますが、 利用者は編集できませんし、提出時に使われることもありません。

無効 fieldset

[21] fieldset 要素は、次の時無効fieldset (disabled fieldset) です >>84

実際に無効

定義

[71] 要素実際に無効 (actually disabled) であるとは、次の状態をいいます >>70

[68] <input type=hidden> には適用されないこととされていましたが、実装に合わせて >>67 で適用されるように変更されました。

用法

[75] この概念は :disabled/:enabled 擬似クラス (>>53) の定義とフォーカス可能性の定義で使われています。

:disabled 擬似クラス、:enabled 擬似クラス

[25] :enabled 擬似クラス:disabled 擬似クラスは、利用者界面要素が有効である、または無効であることをそれぞれ表します >>24

仕様書

意味

[26] どの要素利用者界面要素であるか、また有効であるか無効であるか、は文書言語によって定義されます >>24

[27] CSS 的に利用者が操作可能であるか否かは有効・無効に直接影響しません。例えば 'display''visibility' によってレンダリングの有無を指定し、 ひいては利用者が操作できなくすることができるかもしれませんが、それによって :enabled:disabled の状態が変化するわけではありません。 >>24

HTML

[88] :enabled 擬似クラスは、次の要素のうち、 実際に無効でないものに一致します >>39

[40] :enabled 擬似クラスは次の要素一致します >>39

[53] :disabled 擬似クラス実際に無効である要素 (>>71) と一致します >>39

XForms

[29] XForms では、 :enabled:disabled はそれぞれフォーム制御子関係ある (relevant) または無関係 (non-relevant) であることを表します。

歴史

選択子3

[32] はじめこれらの WD で定義されていましたが、その後選択子3に移されたようです。

[66] その後の CSS3 UI は単に選択子3へのリンクになっています。

XForms

[34] XForms における定義は >>33 で追加されました。

Web Controls 1.0

[38] Webアプリケーションが状態を制御できるように拡張する構想もありました。

HTML

[64] HTML に関してははじめ Web Forms 2.0 が、後に HTML Living Standard (Web Applications 1.0) が規定するようになりました。

実装

[13] Bug 84400 - Support :disabled and :enabled pseudo-classes https://bugzilla.mozilla.org/show_bug.cgi?id=84400 (名無しさん 2005-08-31 02:15:00 +00:00)

メモ

[69] Web Applications 1.0 r7498 Another attempt at defining tabindex, :disabled, what can be focused, etc. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7497&to=7498

[76] Web Applications 1.0 r8390 Update how the interaction with CSS style sheets and CSSOM is defined. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8389&to=8390

[77] Bug 26622 – :enabled shouldn't match links, since they have no disabled state ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=26622

[78] IRC logs: freenode / #whatwg / 20140903 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140903#l-733

[79] Web Applications 1.0 r2778 Defined how pseudo-classes match HTML concepts. Redid how rtl/ltr changes are marked. Stopped <legend> centering for <figure>. Removed <multicol> support. Removed <basefont> support. Removed obsolete notes. Fixed minor typos. ( ( 版)) http://html5.org/r/2778

[80] IRC logs: freenode / #whatwg / 20140903 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140903#l-733

[81] Web Applications 1.0 r8746 Try to clarify 'form control is disabled'. ( ( 版)) http://html5.org/r/8746

[1] Web Applications 1.0 r8753 Make sure :disabled matches fieldsets inside disabled fieldsets, since apparently that's a thing. Also, editorial cleanup around 'disabled'. ( 版) http://html5.org/r/8753

[85] Web Applications 1.0 r8818 Make :enabled not match <a href> ( 版) https://html5.org/r/8818

[86] 28673 – Anchors should be disable-able ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28673

[87] Define :enabled by reference to "actually disabled" (gibson042著, ) https://github.com/whatwg/html/commit/881985545c6c5edc8a19a72a8249dcbe5e7c5d61

[89] Editorial: "actually disabled" is also used for :enabled now (annevk著, ) https://github.com/whatwg/html/commit/ac87672aa0c840ac5ff810c5ed39c5523923d17a

[90] Non-normative note about disabled controls disallows selection · Issue #1852 · whatwg/html () https://github.com/whatwg/html/issues/1852

[91] Clarify the difference between disabled and readonly (domenic著, ) https://github.com/whatwg/html/commit/5918513a6662afc3e94073498a1755a39bb98e9b

[92] Clarify and add some examples around focus (domenic著, ) https://github.com/whatwg/html/commit/deb83668390151a2cf242c24dd9d68509860e77a

[93] Remove the context menu feature (domenic著, ) https://github.com/whatwg/html/commit/e7e8c88ecdd7cdc96171f05ab6fe23b56dd48d8a

[94] Clarify disabled for option/optgroup is defined separately (annevk著, ) https://github.com/whatwg/html/commit/8d60f070d6ba6b5c7dfbc116fd9d3faee5d9c96e

[95] Clarify disabled for option/optgroup is defined separately by annevk · Pull Request #3415 · whatwg/html () https://github.com/whatwg/html/pull/3415

[96] Editorial: attribute domintro/index tweaks (domenic著, ) https://github.com/whatwg/html/commit/39098184f795a75887239af5a34d812f2994dd95