【JavaScript】セレクトボックスをreadonlyにする

Tweet

Category html5, JavaScript 2017/11/28

問題

select要素でreadonlyしたいのですが、無理ですか。

disabled じゃなくて、readonlyです。

使用可能だけど、変更不可にしたいです。

答え

readonuly属性では無理です。

考え方を変えると、選択中のoption以外をdisabled にするという手は使えます。

他をdisabledにすれば、有効な選択肢が選択中の1件のみとなり、選択肢を変えることができなくなることで、結果的にreadonlyっぽい動きになるというもの。

デモ

phpJavaScriptHTMLCSS

JavaScriptでoptionにdisabledをつけたり外したりすれば、readonlyにしたり解除したりに相当する動作ができる。