チェックボックスがチェックされると、ボタンがアクティブになる仕掛けについて

Question

2つのチェックボックスのいずれかがチェックされると同時に
２つの送信ボタンが赤色に変化するという仕掛けを作っています。

チェックボタンは正しく機能するのですが、
送信ボタンがactive状態になったまま変化してくれません。
どのようにすれば制御ができるのでしょうか？

<label>
              <input id="check"
                type="checkbox"
                name="check"
                class="checkbox">
              <span class="checkbox-icon"></span></label>お手続きの前に<a class="checkbox_link"
              href="description.html"
              target="_blank">重要事項説明</a>をお読みください。 <input id="submit"
              class="submit"
              type="submit"
              name="submit"
              value="手続きを進める">

上記HTMLコードは2点ございます。

 const check = $("input[type='checkbox']");
  $('.submit').prop('disabled', true);
  const active = $('.submit').prop('disabled', true);
  let tf = false;
  check.on('change', function () {
    if (active) {
      $('.submit').css('background-color', '#E83827').disabled = false;
      check.prop('checked', (tf = !tf));
      return false;
    } else {
      $('.submit').css('background-color', '#a5a5a5').disabled = true;
      check.prop('checked', (tf = tf));
      return true;
    }

ご確認の程、お願い致します。

※補足

$(function () {
  const check = $("input[type='checkbox']");
  let tf = false;
  check.on('change', function () {
    var active = $('.submit').prop('disabled', true);
    if (active) {
      $('.submit').css('background-color', '#E83827').prop('disabled', false);
      check.prop('checked', (tf = !tf));
      return false;
    } else {
      $('.submit').css('background-color', '#a5a5a5').prop('disabled', true);
      check.prop('checked', (tf = tf));
      return true;
    }
  });

Answer 1

送信ボタンがactive状態になったまま変化してくれません。

MDN Input 属性

どのようにすれば制御ができるのでしょうか？

スタイルによる装飾は置いておき（HTML/CSSを理解していれば後からどうにでもできるはずです）、
JavaScriptによるイベント発生順やDOM操作に集中して実装します。

1. ２つの input[type=submit] を初期化（disabled にして、送信させない）。
2. ２つの input[type=checkbox] に change イベントを定義

リスナの処理は、input[type=checkbox]が両方チェックされている場合に、２つの input[type=submit]からdisabled を外す（装飾変更のタイミング）。

pure javascript ですが、動くサンプルです。

上記HTMLコードは2点ございます

input#id が重複しないように確認が必要です。
（サンプルでは check1、check2 に変えています）

Answer 2

changeイベント前にactive変数に値を保持してそのままのため、ずっとactiveの値は変わりません（しかもconstなので上書き不可）

Comments

[pr_777]

ご回答いただきありがとうございます。
changeイベント前にあった変数宣言をイベント内に記述してconstからletに変えましたが、
特に変化はございませんでした。

[m.ts10806]

こちらが意図した内容になっているか分かりませんので、追記してください。
あと、そこからヒントを得て自身でも工夫してみてください。

[m.ts10806]

prop('disabled', true)　だとdisabledを入れてるだけですからね。
単に中に入れただけだとクリックするたびにdisabledにします。

[m.ts10806]

もう１つヒントだと
active = $('.submit').prop('disabled', true);

これはprop('disabled',true)の実行結果の正否を保持しているだけでボタンの状態は取得していません。
初期値disabledしたいのでしたらボタンに直接書いておくのが良いのでは。

[pr_777]

上記補足にてコードを追記しました。
また、submitボタンには直接disabledの記述をしました。

現状だと、ボタンチェック時に送信ボタンの色も同時に赤色（アクティブ状態）になるところまでは実装ができたのですが、チェックボタンを外しても再び送信ボタンが'disabled'状態にならない状態のままです。

特にelse以降の処理が実行されないのですが、
こちらの質問の意図はうまく伝わっていましたでしょうか？
伝わっていなかったようでしたら、申し訳有りません。

var active = $('.submit').prop('disabled', true);
に関しては、承知の上で記述しております。

[m.ts10806]

「active」は「現在の状態」を取得してください。