はじめに

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

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

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

readonly

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

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

selectタグにdisabled

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

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

optionタグにdisabled

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

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

pointer-events: none

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

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

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

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