ラボ > Javascript関連：form、HTML：form関連

formのcheckboxやradio、selectのreadonly

「type=text」と違って「readonly」が使えないので、その代案

作成日:2018-01-18, 更新日:2018-03-30

基本

・単純に「readonly="readonly"」とかにしてもダメ。
・「checked」つけて「disabled」にするとプログラム側に値を渡すことでできない（見た目だけで良ければコレで良い）

checkbox

・解決案１：javascriptで制御
・解決案２：disabledとhiddenの組み合わせ

解決案１：javascriptで制御


<label><input type="checkbox" name="text01" value="1" onclick="return false;" /> 鳥精</label>
<label><input type="checkbox" name="text02" value="2" onclick="return false;" checked="checked" /> 豚精</label>

解決案２：disabledとhiddenの組み合わせ

「disabled」にするとプログラム側で取得できなくなるので、「hidden」で値を渡す。


<label><input type="checkbox" name="text11" value="1" checked="checked" disabled="disabled" /> 鳥精</label>
<input type="hidden" name="text11" value="1" />

radio

「readonly」じゃなく「対象のみchecked、他はchecked無し」にする

・選択させたくない「radio」に「disabled」をセット
・対象のみ「checked」をつける



<label><input type="radio" name="text21" value="1" disabled="disabled"> 鳥精</label>
<label><input type="radio" name="text21" value="2" disabled="disabled"> 豚精</label>
<label><input type="radio" name="text21" value="3" checked="checked"> 丸ごとシマウマ</label>

select

「selected」じゃなく「対象のみselected、他はselected無し」にする

・選択させたくない「option」に「disabled」をセット
・対象のみ何もつけない（「selected」をつけても良い）

<select>
   <option value="1" disabled="disabled">鳥精</option>
   <option value="2" disabled="disabled">豚精</option>
   <option value="3">丸ごとシマウマ</option>
</select>