セレクトボックスを選択不可にする方法をサンプルコード付き解説!

HTMLのセレクトボックス(select要素)を選択不可にする方法をサンプルコード付きで解説します!フォームで利用するreadonly属性とdisabled属性の違いについてもご紹介します。編集不可コントロールの正しい扱い方をよく理解して正しいフォームを作成しましょう!

コンテンツ [表示]

  1. 1セレクトボックスを選択不可にしたい
  2. 2input要素のようにセレクトボックスをreadOnlyにしたい
  3. 3セレクトボックスを選択不可にする方法
  4. 3.1input要素のtype属性値をhiddenにして値をこっそり送る
  5. 3.2option要素にdisabled属性をつける
  6. 3.3CSSでセレクトボックスの操作を無効化する
  7. 4まとめ

セレクトボックスを選択不可にしたい

WEBサイトや、WEBアプリケーションで、選択できないセレクトボックス(select要素)を設置したい時はないでしょうか?

例えば、お問い合わせフォームの確認ページやアプリケーションの設定ページで既に内容が決まっていたり変更はできないが表示はしたい・・・そんな時です。

そこで、今回はHTMLのセレクトボックスを選択不可にする方法をサンプルコード付きで解説します!

Photo byyatsusimnetcojp

input要素のようにセレクトボックスをreadOnlyにしたい

「セレクトボックスをreadOnly属性にすればいいんじゃないの?」って思った人もきっといるでしょう。

結論から言うと、select要素ではreadOnly属性が使えないんです。ならば、フォームを無効化するdisabled属性ではどうでしょうか?

disabled属性にするとその要素はデータが送信されないんです。そのため今回セレクトボックスで実装したいことをまとめると・・・

選択不可のセレクトボックスのまとめ

  • セレクトボックスは見た目上表示されている
  • セレクトボックスの内容は変更できないようにする
  • フォームのデータが送信できるようにする

セレクトボックスを選択不可にする方法

それでは、実際にセレクトボックスを選択不可にする方法を解説します。

サンプルコードもありますので、用途に応じて使わけてみてくださいね!

input要素のtype属性値をhiddenにして値をこっそり送る

このサンプルコードは私が最もよく見慣れたコードです。

サンプルコードを見てみましょう。

【HTML】input要素のtype属性値をhiddenにして値をこっそり送る

<select name="skill" disabled>
    <option value="1">HTML</option>
    <option value="2">CSS</option>
    <option value="3">Javascript</option>
</select>
<input type="hidden" name="skill" value="2">

select要素へdisabled属性を付与しています。

先ほどは、disabled属性が使えないような言い方になってしまいましたがそういう訳ではありません。

しかしこのままだと、前項で説明したいようにデータが送信されません。

そこで、type属性をhiddenにしたinput要素にvalueとしてこっそり渡しておきます。
この要素は標準でdisplay: none;がかかるので見た目上は表示されません。

こうすることでセレクトボックスは選択不可にしたままで必要なデータを送信できるようになります。

見た目や挙動についてはプレビューをご覧ください。

option要素にdisabled属性をつける

こちらが1番簡単で仕様に沿った使い方ではないかと思います。

サンプルコードを見てみましょう。

【HTML】option要素にdisabled属性をつける

<select name="skill">
    <option value="1" disabled>HTML</option>
    <option value="2" selected>CSS</option>
    <option value="3" disabled>Javascript</option>
</select>

選択された要素は、selected属性を付与して、それ以外の選択肢にはdisabled属性を付与しています。
つまりselect要素も必要なoption要素も無効化されていないのです。

disabled属性が付与されているデータはそもそも必要ないので送信されなくてもいいですもんね!
しかも、選択を変更しようとしても、他の選択肢はdisabledになっているので変更が出来ないのもいいですね。

見た目や挙動についてはプレビューをご覧ください。

CSSでセレクトボックスの操作を無効化する

cssで実装する方法です。

サンプルコードを見てみましょう。

【HTML】CSSでセレクトボックスの操作を無効化する

  <select name="skill" class="disabled" tabindex="-1">
    <option value="1">HTML</option>
    <option value="2">CSS</option>
    <option value="3">Javascript</option>
  </select>

cssの pointer-events: none; を指定することで、あらゆるマウス操作を無効化できます。

ただしこの場合でも、キーボード操作が可能となるため tabindex="-1" を指定してフォーカスが当たらないようにします。

cssのみでの制御は何かのきっかけで指定が外れ不具合の原因になりやすいので注意しましょう。

あわせて読みたい
pointer-events
CSSのpointer-eventsプロパティはポインターイベントの発生の対象を制御するプロパティです。pointer-eventsプロパティの構文や使い方をサンプルコード付きで解説します。

まとめ

今回は、セレクトボックスを選択不可にする方法について解説しました。

readonly属性とdisabled属性の特性が分かっていないと、サーバー側に必要なデータが送信されていなかったり、またその逆のパターンもあります。

実装する方法はたくさんありますが、標準のフォームの扱いを無視して作ってしまうと、
あとで困ってしまうこともあるので、みなさんも注意してください。

1番良いのはチームで共通したルールをもって作ることですね!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

Qumeru事務局
ライター

Qumeru事務局