小粋空間  -  a cheap joke and a play on words site

チェックボックスを変更不可にする方法

フォームでチェックボックスを変更不可にする方法を紹介します。

１．はじめに

ある案件で「フォームのチェックボックスをチェックしたままの状態（ユーザーが操作できない）にしたい」という要望がありました。

が、readonly属性ではチェックボックスは操作不可にできないようです。

<input type="checkbox" name="foo" value="1" checked="checked" readonly="readonly" />

また操作不可にするにはdisabled属性を追加するがありますが、disabledにするとそもそもフォームの送信対象から外れてしまいます。

<input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" />

ということで何かいい方法はないでしょうか。

２．チェックボックスを変更不可にする

チェックボックスを変更不可にするには、まずチェックボックスにdisabled属性を追加します。

<input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" />

これだけでは前述のとおり、チェックボックスのinput要素がフォームの送信対象とならないため、チェックボックスと同じname属性とvalue属性の「type="hidden"」のinput要素を追加します。

<input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" />
<input type="hidden" name="foo" value="1" />

これでチェックボックスを操作できないようにするフォームになります。