チェックボックスを変更不可にする方法
小粋空間 » HTML » チェックボックスを変更不可にする方法
フォームでチェックボックスを変更不可にする方法を紹介します。
１．はじめに
ある案件で「フォームのチェックボックスをチェックしたままの状態（ユーザーが操作できない）にしたい」という要望がありました。
が、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" />これでチェックボックスを操作できないようにするフォームになります。