HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのoptgroup要素でdisabled属性を使って選択肢グループを無効化する方法

<optgroup>要素のdisabled属性は、セレクトボックス内のオプショングループ全体を無効化するために使用します。この属性を設定すると、そのグループに属するすべての選択肢がクリック不可となり、ユーザーは選択できなくなります。

disabled属性の基本構文

構文は非常にシンプルで、無効化したい<optgroup>タグにdisabledを追加するだけです。

<optgroup disabled>

それでは、実際に<optgroup>要素のdisabled属性を実装した例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Water Levels</h2>
<p>Impurity Level <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
<select>
    <optgroup label="Ratio">
        <option value="one">3:2</option>
        <option value="two">5:3</option>
    </optgroup>
    <optgroup label="Water" disabled>
        <option value="low">2L</option>
        <option value="Medium">5L</option>
        <option value="high">10L</option>
        <option value="veryhigh">20L</option>
    </optgroup>
</select>
</body>
</html>

実行結果

HTMLのoptgroup要素でdisabled属性を使って選択肢グループを無効化する方法

コードの解説

上記の例では、2つのオプショングループを設定しています。

<optgroup label="Ratio">
    <option value="one">3:2</option>
    <option value="two">5:3</option>
</optgroup>
<optgroup label="Water" disabled>
    <option value="low">2L</option>
    <option value="Medium">5L</option>
    <option value="high">10L</option>
    <option value="veryhigh">20L</option>
</optgroup>

このうち、「Water」グループに対してのみdisabled属性を指定しています。

<optgroup label="Water" disabled>
    <option value="low">2L</option>
    <option value="Medium">5L</option>
    <option value="high">10L</option>
    <option value="veryhigh">20L</option>
</optgroup>

これにより、「Water」グループ内のすべての選択肢（2L、5L、10L、20L）が無効化され、グレーアウトして表示されます。訪問者はこれらの項目を選択することができません。一方、「Ratio」グループにはdisabled属性が設定されていないため、通常どおり選択可能です。

まとめ

disabled属性は、ブール型属性のため値を指定する必要はなく、属性名を記述するだけで機能します。一時的に利用できない選択肢や、特定の条件下でのみ有効になる項目を視覚的にも明確にしたい場合に便利です。なお、JavaScriptで動的にdisabledプロパティを切り替えることで、状況に応じてグループの有効・無効を制御することも可能です。

  1. HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのsize属性は、select要素やinput要素において、画面に表示される選択肢の数（または入力欄の文字数）を指定するための属性です。この属性を使うことで、ドロップダウンリストを複数行表示のリストボックスに変更したり、テキスト入力欄の横幅を調整したりすることができます。 size属性の構文 size属性の基本的な記述方法は以下のとおりです。 <tagname size="数値"></tagname> size属性には、表示したい選択肢の数や文字数を整数で指定します。 HTML size属性の使用例 それでは、実際にsize属性を使用した具体

  2. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目