デフォルトでチェックが入っているときの処理

Question

aaaとbbbのチェックボックスがあります。
最初、bbbは非アクティブですが、
aaaをチェックするとbbbはアクティブになります。
その時、bbbの文字色も変わります。

aaaのinputに最初からchecked="checked"を付けておいた場合に、
文字色、アクティブ処理が反映されません。
チェックを外して再度チェックしなおさないと、
bbbの文字色が変わりません。

この場合はどうすればよろしいのでしょうか。

<span class="select--area parent--01">
      <input type="checkbox" name="aaa1" value="1" id="aaa1" class="checkSet" checked="checked"> <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="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>

.nest--01.active{
  color:#ff0000;
}

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

  $('#aaa1').change(function () {
    // チェックが入っていたら有効化
    if ($(this).is(':checked')) {
      // アクティブ化
      $('.select--area.nest--01').addClass('active');
    } else {
      // 非アクティブ化
      $('.select--area.nest--01').removeClass('active');
    }

  });

});

Comments

[m.ts10806]

on()とchange()が混在しているのはどういう意図があるのでしょうか？

[thyda.eiqau]

css側で.nest--01:checkedの指定にするのが一番簡単だと思いますが、そうできない前提条件があるのであればその旨も追記をしてください。

Answer 1

$('#aaa1').on('change',・・・と、$('#aaa1').changeをわける意味がない

$(function () {
  $('#aaa1').on('change', function () {
    $('#bbb1').prop('disabled', !$(this).prop('checked'));
    $('.select--area.nest--01').toggleClass('active',$(this).is(':checked'));
  }).trigger('change');
});

Comments

[up24]

そうですね。
仰る通りです。