チェックボックスを解除時のイベント記述

Question

基本的な質問で申し訳ありません。
チェックボックスA-checkboxをチェックして、解除したときに
ボタンB-buttonからクラス名activeを削除し、
ボタンが機能しないようdisabledを追加するにはどのようにすればよいかご教授ください。
下記の方法かと思ったのですが、うまくいきません。

/* A-checkbox */
<div class="check-area select-checkbox"><input type="checkbox" name="check" value="" class="A-checkbox" id="checkbox01"><label for="checkbox01" class="checkbox"></label></div>

/* B-button */
<button type="button" class="btn btn-primary selectDeleteBtn active" disabled=""><i class="fas fa-eraser"><span>削除</span></i><span></span></button>

$('.A-checkbox').prop({'checked':false}){
   $(".B-button").removeClass("active").prop('disabled', true);
 };

Answer 1

$('.A-checkbox').on('change'

で処理しますが、例示のHTMLに.A-checkboxも.B-buttonも
見当たらないので検証のしようがないですね

sample

ざっとしたサンプル付けときます

.active{color:red};

$(function(){
  $('.A-checkbox').on('change',function(){
    var flg=$(this).prop('checked')
    $(".B-button").toggleClass("active",!flg).prop('disabled',flg);
  }).eq(0).trigger('change');
});

<input type="checkbox" class="A-checkbox">
<input type="button" class="B-button active" value="B">

Comments

[up24]

お手数をおかけしました。
ありがとうございました。
勉強させていただきました。

Answer 2

<input type="checkbox" class="A-checkbox">
<button type="button" class="B-button" disabled>Button</button>

jQuery(function($) {
  var button = $(".B-button");
  $(".A-checkbox").on("change", function() {
    var checked = $(this).prop("checked");
    button.toggleClass("active", checked).prop("disabled", !checked);
  });
});

Comments

[up24]

ありがとうございました。
こちらで対処させていただきました。
勉強になりました。