HTML 属性: disabled
disabled
は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。
試してみましょう
概要
フォームコントロールに disabled
属性が指定された場合、その要素とフォームコントロールの子孫は制約検証が行われません。多くの場合、ブラウザーはそのようなコントロールをグレーアウトし、マウスクリックやフォーカス関連のイベントなどの閲覧イベントを受け取りません。
disabled
属性は、 <button>
, <fieldset>
, <optgroup>
, <option>
, <select>
, <textarea>
, <input>
が対応しています。
論理属性の disabled は、ユーザーがコントロールやその子孫のコントロールと対話できないことを示します。この属性が指定されていない場合、コントロールは、例えば fieldset
のような包含要素からその設定を継承します。 disabled
属性が設定されている包含要素がなく、コントロール自体がこの属性を持っていない場合、コントロールは有効になります。 <optgroup>
上で宣言された場合、 select は(特に無効化されていない限り)操作可能になりますが、オプショングループの項目はどれも選択不可能になります。
メモ: <fieldset>
が 無効になると、 <legend>
内のフォーム制御を除いて、子孫のフォーム制御もすべて無効になります。
対応する要素に disabled
属性が適用されている場合、 :disabled
擬似クラスも適用されます。逆に、 disabled
属性に対応しているが、その属性が設定されていない要素は、 :enabled
擬似クラスに一致します。
この論理属性は、ユーザーがボタンを操作することを防ぎます。この属性が設定されていない場合でも、例えば <fieldset>
のような包含要素からボタンを無効にすることができます。 disabled
属性が設定された包含要素が存在しない場合、ボタンは有効になります。
Firefox は他のブラウザーとは異なり、ページを再読み込みしても <button>
の動的な無効状態を維持します。この機能を制御するには autocomplete
属性を使用します。
属性の操作
disabled
と readonly
の違いは、コントロールは読み取り専用 (read-only) になっても機能し、フォーカスを受けることができますが、無効なコントロールはフォーカスを受けることができず、フォームと共に送信されず、一般的には有効になるまでコントロールとして機能しないということです。
無効にされたフィールドはその値を変更することができないので、 required
は disabled
属性も指定されている入力に対しては効果がありません。さらに、要素が変更不可になるので、pattern
のような他のほとんどの属性も、コントロールが有効になるまで効果がありません。
メモ: disabled
属性が指定されている入力フィールドでは、 required
属性は許可されません。
ユーザビリティ
制約検証
要素が disabled
である場合、要素の値はフォーカスを受けることができず、ユーザーによって更新されることもなく、制約検証が行われることもありません。
例
フォームコントロールが無効になったとき、多くのブラウザーは既定で、より薄いグレーアウトした色で表示します。ここでは、無効になったチェックボックス、ラジオボタン、 <option>
と <optgroup>
の例と、祖先の <fieldset>
要素に設定された disabled 属性によって無効にされているいくつかのフォーム制御の例を示します。 <option>
は無効になっていますが、 <select>
自体は無効になっていません。 <select>
自体を無効にするには、子孫ではなく、その要素にこの属性を追加します。
<fieldset>
<legend>チェックボックス</legend>
<p>
<label>
<input type="checkbox" name="chbox" value="regular" /> 通常
</label>
</p>
<p>
<label>
<input type="checkbox" name="chbox" value="disabled" disabled /> disabled
</label>
</p>
</fieldset>
<fieldset>
<legend>ラジオボタン</legend>
<p>
<label> <input type="radio" name="radio" value="regular" /> 通常 </label>
</p>
<p>
<label>
<input type="radio" name="radio" value="disabled" disabled /> disabled
</label>
</p>
</fieldset>
<p>
<label
>選択してください:
<select>
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option disabled>Option 2.2</option>
<option>Option 2.3</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Disabled 3.1</option>
<option>Disabled 3.2</option>
<option>Disabled 3.3</option>
</optgroup>
</select>
</label>
</p>
<fieldset disabled>
<legend>無効なフィールドセット</legend>
<p>
<label>
名前: <input type="radio" name="radio" value="通常" /> 通常
</label>
</p>
<p>
<label>数値: <input type="number" /></label>
</p>
</fieldset>
仕様書
Specification |
---|
HTML # attr-fe-disabled |
HTML # attr-optgroup-disabled |
HTML # attr-option-disabled |
ブラウザーの互換性
html.elements.button.disabled
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.fieldset.disabled
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
html.elements.input.disabled
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.optgroup.disabled
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.option.disabled
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.select.disabled
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.textarea.disabled
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support