セレクトボックスを編集不可にする

はじめに

セレクトボックスを編集不可にする為、selectタグにreadonlyを付けたところ編集が出来てしまいました。
どうやら「readonly属性はテキスト以外では無効」だそうです。

そこで調べたところ、編集不可にするにはreadonly、disabled、pointer-events: noneの3種があるようです。

readonly、disabled、pointer-events: noneを比較

readonly

• マウスでフォーカスが当たる
• tabキーで遷移する
• 変更が出来ない
• Submitで送信される
• テキスト以外では無効

disabled

• マウスでフォーカスが当たらない
• tabキーで遷移しない
• 変更が出来ない
• Submitで送信されない

pointer-events: none

• マウスでフォーカスが当たらない
• tabキーで遷移する（「tabindex="-1"」でタブ遷移しなくする必要あり）
• 変更が出来る
• Submitで送信される

セレクトボックスに適用してみる

readonly

readonly

<select readonly>
  <option>選択肢1</option>
  <option selected>選択肢2</option>
  <option>選択肢3</option>
</select>

readonly属性はテキスト以外では無効なので変化なし。

selectタグにdisabled

selectタグにdisabled

<select disabled>
  <option>選択肢1</option>
  <option selected>選択肢2</option>
  <option>選択肢3</option>
</select>

セレクトボックスをクリックしても選択肢が表示されなくなる。
選択肢が表示されないので、変更が出来なくなる。

optionタグにdisabled

optionタグにdisabled

<select>
  <option disabled>選択肢1</option>
  <option disabled selected>選択肢2</option>
  <option disabled>選択肢3</option>
</select>

セレクトボックスをクリックすると選択肢が表示される。
選択肢をクリックしても選択が出来なくなる。
選択が出来ないので、変更が出来なくなる。

pointer-events: none

pointer-events: none

<select style="pointer-events: none;" tabindex="-1">
  <option>選択肢1</option>
  <option selected>選択肢2</option>
  <option>選択肢3</option>
</select>

セレクトボックスをクリックしても選択肢が表示されなくなる。
選択肢が表示されないので、変更が出来なくなる。

おわりに

今回は「非活性でも選択肢が見えるようにしたい」との要望があった為、「optionタグにdisabled」で対応しました。

• selectタグにdisabled
• optionタグにdisabled
• pointer-events: none

それぞれに違いがあるので、どれが良いという訳でなく状況に応じて使い分ければと思います。