チェックボックスでdisabledを切り替える方法【JavaScript・jQuery】

まずはJavaScriptで実装する

現在はこの程度の処理でjQueryを追加する必要はありません。checkedの反対値をbutton.disabledへ代入すると、初期状態と変更後の状態を同じ関数で管理できます。

<label><input id="agree" type="checkbox"> 規約に同意する</label>
<button id="submit" type="submit" disabled>送信</button>

const checkbox = document.querySelector('#agree');
const button = document.querySelector('#submit');

const syncDisabled = () => {
  button.disabled = !checkbox.checked;
};

checkbox.addEventListener('change', syncDisabled);
syncDisabled();

jQueryを使う既存サイトの場合

const $checkbox = $('#agree');
const $button = $('#submit');

function syncDisabled() {
  $button.prop('disabled', !$checkbox.prop('checked'));
}

$checkbox.on('change', syncDisabled);
syncDisabled();

disabledの注意点

• disabledのフォーム部品は送信データに含まれない
• 見た目だけ薄くしても操作は無効にならない
• サーバー側の同意確認や入力検証は別途必要
• aria-disabledだけではネイティブの操作を止めない

CSSで状態を表す

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
button:enabled:hover {
  filter: brightness(1.1);
}

参考資料

• MDN: disabled