readonlyのセレクトボックスを値変更不可にするjavascript

概要

htmlのselectタグにreadonly属性をつけても、見た目それっぽくなるだけで変更できてしまう。
それを解決する方法の1つである「選択中以外の選択肢をすべてdisabledにする」の汎用コード。

本題

jQuery版

$(function(){
  $("form select[readonly] > option:not(:selected)").attr('disabled', 'disabled');
})

素のjs版

@sgn9 さんにコメントで頂きましたので並べておきます

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('select[readonly] option')
    .forEach(e => e.disabled = !e.selected);
});

ポエムな背景

そこそこ汎用的だと思うのだけどそのへんに転がってると思ったら見当たらなくて久しぶりにセレクタ調べました