2013/08/01

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じゃないのでちゃんと見えるしフォーム送信も出来る。で変更することは出来ない。
が何か見た目コンボボックス自体がDisableなのかと間違いそう…
スタイルを色々弄って、違和感ないようにしたいところ。例えばselectタグに「style="background-color: #cccccc;"」なんて設定するとReadonlyを強調できそう( こうなるが余計Disableと間違うか?)

HTMLはプログラミング言語と違ってネットで調べながら、「書く→見る→書き直す→見る→…」の繰り返しで割と簡単に身に付くでしょう。ただ一度くらいは教科書的な正しい知識を入れておいてもいいです。
HTML5+CSS3の新しい教科書

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を付けるってのが意外と厄介かも。
トップページへ

0 件のコメント:

コメントを投稿