readonly な radio や select / option や checkbox は css 一発で実現できる

2020/08/042020/08/05

結論

.my-form-control-disabled {
  pointer-events: none;
}

みたいな css をセットしてやればOK。IE11も対応してます。

pointer-events - CSS: カスケーディングスタイルシート | MDN

pointer-events は CSS のプロパティで、特定のグラフィック要素がポインターイベントの対象になる可能 ...

 https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

詳細

disabled 属性を付けたら request に値が渡ってこなくて困った…という経験は誰にでもあるのでは。

ググると「hidden で別の要素をつくって…」とか「他の選択肢を全部 disabled にして」とか面倒な話ばっかり出てくるので、自分用にメモ。

（ pointer-events ってキーワードを思い出せないんですよねぇ…。）

あとは color とか background-color とかで見た目を調整が必要ですが、その辺りはよしなに…。