ラジオボタンは標準でreadonlyが効きませんが
CSSで簡単にできます。
|
1 |
pointer-events: none; |
だけでも変更不可になるのですが、色をグレーにして変更不可感を出します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .radio-readonly { appearance: none; pointer-events: none; } .radio-readonly::before { content: '〇'; color: #c0c0c0; } .radio-readonly:checked::before { content: '●'; color: #808080; } </style> |
ラジオボタンのinputタグにradio-readonlyクラスを指定
|
1 2 3 |
<input name="radio1" value="1" type="radio" class="radio-readonly" />選択肢１ <input name="radio1" value="2" type="radio" class="radio-readonly" />選択肢２ <input name="radio1" value="3" type="radio" class="radio-readonly" />選択肢３ |
実行結果：
通常のラジオボタン
選択肢１
選択肢２
選択肢３
radio-readonlyクラスを指定したラジオボタン
選択肢１
選択肢２
選択肢３