JavaScript でチェックボックスを読み取り専用にする
2021-07-15
1分で読了
更新: 2025-12-14
目次
チェックボックスは、1行テキストやテキストエリアと違って readonly 属性が効きません。したがって、チェックボックスを読み取り専用（変更不可）にするには少し工夫が必要です。
HTML に手を入れられるのであれば、下記のように onclick 属性で return false; すればOKですね。
HTML に手を入れられないときは、下記のような JavaScript で対応できます。
document.querySelector('[name="foo"]').addEventListener('click', (event) => {
event.target.checked = !event.target.checked;
});やっていることは、チェックボックスがクリックされたときに、そのときのチェック状態と反対の状態をセットするようにしています。つまり、
- チェックを外した状態 → クリック → チェックボックスがチェック状態になった → その反対のチェックを外した状態にする
ということですね。