チェックボックスにチェックして別のチェックボックスをアクティブにしたい

Question

aaaとbbbのチェックボックスがあり、
最初、bbbは非アクティブでチェックできない状態だが、
aaaにチェックするとbbbがアクティブになり、
bbbをチェックできるようになる。

bbbにチェックした後、
aaaのチェックを外すとbbbは非アクティブになるようにしたいのですが、
どうすればよろしいでしょうか。

現状は
aaaにチェックを入れると、bbbのpointer-eventsをallにすることで
bbbをアクティブにしようと思っているのですが、うまく反映できない状態です。

<span class="select--area parent--01">
                          <input type="hidden" name="aaa1" value="0"><input type="checkbox" name="aaa1" value="1" id="aaa1" class="checkSet">                                    <label for="aaa1" class="text-checkbox ml-30p">
                          <span>aaa</span>
                          </label>
                          <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title="">
                           
                          </a>
                        </span>


<span class="select--area nest--01">
                          <input type="hidden" name="bbb1" value="0"><input type="checkbox" name="bbb1" value="1" id="bbb1" class="checkSet">                                    <label for="bbb1" class="text-checkbox ml-30p">
                          <span>bbb</span>
                          </label>
                          <a tabindex="1" class="icon--question" role="button" data-toggle="popover" data-html="true" data-trigger="focus" data-content="" data-original-title="" title="">
                          </a>
                        </span>

.select--area.nest--01 input,
.select--area.nest--01 label{
  pointer-events: none;
}

$(function(){
  $('.parent--01 .checkSet:checked').change(function() {
    var quantityChecked = $('.parent--01 .checkSet:checked').prop('checked', true);
        if (quantityChecked == 'true'){
          $('.select--area.nest--01 input').css('pointer-events','all');
        }else{
          $('.select--area.nest--01 input').css('pointer-events','none');
        };
      });
});

Answer 1

こんな感じ

<script>
$(function(){
  $('#aaa1').on('change',function(){
    $('#bbb1').prop('disabled',!$(this).prop('checked'));
  }).trigger('change');
});
</script>

<input type="checkbox" name="aaa1" value="1" id="aaa1" class="checkSet">
<input type="checkbox" name="bbb1" value="1" id="bbb1" class="checkSet"> 

あとは、bbb1がチェックされた状態でaaa1のチェックが外れたときにbbb1はdisabledになるとして
checkedを外すかどうか次第ですね

Comments

[up24]

シンプルでわかりやすかったです。
trigger必要でした。
勉強になります。