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