セレクトボックスを選択不可にする方法をサンプルコード付き解説！
HTMLのセレクトボックス（select要素）を選択不可にする方法をサンプルコード付きで解説します！フォームで利用するreadonly属性とdisabled属性の違いについてもご紹介します。編集不可コントロールの正しい扱い方をよく理解して正しいフォームを作成しましょう！
セレクトボックスを選択不可にしたい
WEBサイトや、WEBアプリケーションで、選択できないセレクトボックス（select要素）を設置したい時はないでしょうか？
例えば、お問い合わせフォームの確認ページやアプリケーションの設定ページで既に内容が決まっていたり変更はできないが表示はしたい・・・そんな時です。
そこで、今回はHTMLのセレクトボックスを選択不可にする方法をサンプルコード付きで解説します！
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のみでの制御は何かのきっかけで指定が外れ不具合の原因になりやすいので注意しましょう。
まとめ
今回は、セレクトボックスを選択不可にする方法について解説しました。
readonly属性とdisabled属性の特性が分かっていないと、サーバー側に必要なデータが送信されていなかったり、またその逆のパターンもあります。
実装する方法はたくさんありますが、標準のフォームの扱いを無視して作ってしまうと、
あとで困ってしまうこともあるので、みなさんも注意してください。
1番良いのはチームで共通したルールをもって作ることですね！
