【小ネタ】 HTML のチェックボックスを readonly にする

HTML のチェックボックスには何故か readonly 属性がないらしい。ただし HTML のチェックボックスは OFF 時には項目そのものが送られないため、普通は hidden タイプの要素を組み合わせる。

<input type="hidden" name="checkItem1" value="0">
<input type="checkbox" onclick="this.form.checkItem.value=this.checked ? 1 : 0" id='normal'> <label for='normal'>通常のチェックボックス</label>

通常のチェックボックス

したがって、チェックボックスを readonly にするには disabled 属性を使って

<input type="hidden" name="checkItem2" value="0">
<input type="checkbox" id='checkoff' disabled='disabled'> <label for='checkoff'>チェック OFF の状態で固定</label>
<input type="hidden" name="checkItem3" value="1">
<input type="checkbox" id='checkon' disabled='disabled' checked='checked'> <label for='checkon'>チェック ON の状態で固定</label>

チェック OFF の状態で固定 チェック ON の状態で固定

とすればいいようだ。