HTMLのSelectタグやInputタグのRadioボタンをReadOnlyにする方法

チェックボックスをリードオンリーにする方法を調べていたとき、実はコンボボックス（Selectタグ）をリードオンリーにする方法も同時に調べていて、挫折した。
でも案外簡単。
必要な部分以外を削ったソースはこんな感じ

<select>
  <option disabled="">犬</option>
  <option disabled="">猫</option>
  <option selected="">オランウータン</option>
  <option disabled="">うさぎ</option>
</select>

で結果が 犬 猫 オランウータン うさぎ こうなる。
SelectタグもReadonly属性では無理なので散々迷ったが実際なんのことない、selected属性を付けたoption以外はdisableにするだけ（実は選択可能なオプションが1つだけなのでselected=""は無くても同じだが有った方が分かりやすいでしょ）。
selectタグはdisableじゃないのでちゃんと見えるしフォーム送信も出来る。で変更することは出来ない。
こうすると以前はブラウザによって見た目に違和感があったが、最近の表示では違和感なく有効なセレクトボックスに見えるだろう。

もし見た目に何か強調したいなら、selectタグに「style="background-color: #cccccc;"」など設定することもできる（ 犬 猫 オランウータン うさぎ こうなる）。

Selectタグに関してもう一つ、Select内のリストに絞込み検索をする方法を書きました。 
 

ちなみに、他をDisableにして選択している一つだけを有効にする、というのはRadioでも使えます。というわけでRadioButtonを読み取り専用にする方法(こっちはdisabled="" の代わりに onclick="return false;" でも効くかもしれない)。

<label><input type="radio" name="animals" disabled="" />犬</label><br/>  
<label><input type="radio" name="animals" disabled="" />猫</label><br/>  
<label><input type="radio" name="animals" checked="" />オランウータン</label><br/>   

これで表示すると、こう↓
あなたの好きな動物は？
犬
猫
オランウータン
オランウータン以外選択できません。

ソースは簡単なんだけどPHPやRailsでHTMLを吐かせる時に、選択するものにchecked、それ以外にdisabledを付けるってのが意外と厄介かも。