form外のチェックボックスと送信ボタンを連動したい

Question

form外のチェックボックスにチェックを入れたら送信出来て、
チェックしてないと送信できないようにしたいのですが、disabled が解除できません、、、
書き方が間違っているのでしょうか？
それともチェックボックスの判定のコードがちがいますか、、、？

追記、書き忘れです。すいません
これにボタンが無効な時、チェックボックスにチェックを入れてくださいとアラートを付ける予定です、、　

 <label><input type="checkbox"id="checkbox"><span>同意する</span></label>


 <form  method="POST" onSubmit="return check_cc()">
    	        <button type="submit" class="regist_btn"id="button" disabled>アップロード</button>
 </form>	

	
const button = document.getElementById('button');

// ボタン要素にクリックイベントを追加する
button.addEventListener('click', () => {
  // チェックボックスの要素を取得する
  const checkbox = document.getElementById('checkbox');
  
  // チェックボックスがチェックされているかどうかを確認する
  if (checkbox.checked) {
    // チェックがある場合の処理
    button.disabled = true;
  } else {
    // チェックがない場合の処理
   button.disabled = false;
  }
});

function check_cc(){
    	if(window.confirm("アップロードしますか？")){
            return true;
    	}else{
            return false;
    	}
    }

Answer 1

<script>
document.addEventListener('change', ()=>{
  btn.disabled=!ch.checked;
});
</script>
<label><input type="checkbox" id="ch"><span>同意する</span></label>
<form>
<input name="hoge" >
<button type="submit" class="regist_btn" id="btn" disabled>アップロード</button>
</form>	

追記

ボタンは押せるけど、チェックがついていないとサブミットできないということでよろしいですか？
disabledになったボタンは押せないので

<script>
document.addEventListener('submit',e=>{
  if(!ch.checked){
    e.preventDefault();
    alert('チェックボックスにチェックを入れてください');
  }
});
</script>
<label><input type="checkbox" id="ch"><span>同意する</span></label>
<form>
<input name="hoge" >
<button type="submit" class="regist_btn">アップロード</button>
</form>	

Comments

[ayuayuayu]

いつもありがとうございます。
大変申し訳ないのですが、書き忘れていて、、

これにボタンが無効な時、チェックボックスにチェックを入れてくださいとアラートを付けたいのですが
そうなると
document.addEventListener('change', ()=>
このコードではできなくなりますか、、、？

disabledの切り替えはこのコードでできました！

[yambejp]

ちょっと仕様がわからないところもあるのでとりあえず追記しておきました

[ayuayuayu]

完璧です、、、
こんなに短いコードで出来るなんて思いませんでした、、
また勉強させてもらいました。本当にいつもありがとうございます。

Answer 2

書き方が間違っているのでしょうか？

「ボタン要素にクリックイベントを追加する」とコメントに書いてあるとおりのイベントをセットしているのですが、そのボタンが無効化されている以上、ボタンを押すことはできず、このイベントも発生しません。

チェックボックスの変更時など、変更処理を行うタイミングを変える必要があります。

Answer 3

buttonはdisabledになっているので押せません。
checkboxのイベントの方にbuttonのdisabledを制御するロジックを入れてみてはどうでしょうか。

checkbox on → buttonが押せるように
checkbox off → buttonが押せないように