チェックボックスの親子孫関係

Question

チェックボックス3つを親子孫の関係にしたいです。
直近の上位者(aaa)がアクティブ時には下位者(bbb)がアクティブになる関係を目指しています。
直近の上位者（bbb）がアクティブにならないとcccがアクティブになれない関係です。
aaa,bbbをチェック済み、cccにチェック無しの時に親(aaa)からチェックを外すと
孫(ccc)がアクティブになってしまいます。
親(aaa)がチェック無しの場合は、子(bbb)も孫(ccc)も非アクティブになり押せなくしたいのですが、
どうすればよいでしょうか。

<fieldset>
  <div>
   　　<ul class="select--area parent--01">
        <li class="select--area--sub">
            <span>
            <input type="hidden" name="aaa" value="0">
            <input type="checkbox" name="aaa" value="1" id="aaa" checked="checked">
            <label for="aaa">
            <span>aaa</span>
            </label>
            </span>
　　　　　　 <ul class="outer--01 select--area">
            　　<li class="select--area--sub">
                    <span class="nest--01">
                    　<input type="hidden" name="bbb" value="0">
                    　<input type="checkbox" name="bbb" value="1" id="bbb">
                    　<label for="bbb">
                    　<span>bbb</span>
                    　</label>
                    </span>
                    <ul>
                        　<li class="select--area--sub">
                        　<span class="inner--01">
                            　<input type="hidden" name="ccc" value="0">
                            　<input type="checkbox" name="ccc" value="1" id="ccc" class="checkSet"> 
                            　<label for="ccc" class="text-checkbox">
                            　<span>cccc</span>
                            　</label>
                        　</span>
                        　</li>
                    </ul>
                </li>
        　  </ul>
        </li>
      </ul>
  </div>
</fieldset>

$(function(){
    $('ul[class*="parent--"] > li.select--area--sub > span > input').on('change', function () {
        var flg=$(this).prop('checked');
        $(this).closest('.select--area')
            .find('span[class*="nest--"]').toggleClass('active',flg)
            .find('>input').prop('disabled', !flg);

        $('ul>li>span[class*="nest--"]').find('span[class*="inner--"]').toggleClass('active',flg)
          .find('>input').prop('disabled', !flg);
       }).trigger('change');
});

$(function(){
    $('ul[class*="outer--"] > li.select--area--sub > span > input').on('change', function () {
        var flg=$(this).prop('checked');
        $(this).closest('.select--area')
            .find('span[class*="inner--"]').toggleClass('active',flg)
            .find('>input').prop('disabled', !flg);
     }).trigger('change');
});

Comments

[yambejp]

もう少し条件を明確にして下さい
A,B,Cがつねに同じチェック状態というわけではないのですよね？
Aをチェック/非チェックするとB,Cはどうなる？
Bをチェック/非チェックするとA,Cはどうなる？
Cをチェック/非チェックするとA,Bはどうなる？

それともAが非チェック時はB,Cはdisabledってことですかね？

[up24]

＞それともAが非チェック時はB,Cはdisabledってことですかね？
　そうです。Aをチェック時にBがアクティブに、Bをチェック時にはCがアクティブになります。
　Aを非チェック時にはB,Cはdisabled、Bを非チェック時にはCがdisabledになります。
　Cをチェック時にはA,Bともアクティブ状態なのは変わらず、A,B共チェックが入ったままになります。
　Cを非チェック時でもA,Bともアクティブ状態なのは変わらず、A,B共チェックが入ったままになります。

＞Aをチェック/非チェックするとB,Cはどうなる？
　Aをチェック時はBだけがアクティブになります。
　Bはチェックが入っていようがなかろうがアクティブになるだけです。
　Aを非チェック時はB,Cはdisabledになります。

＞Bをチェック/非チェックするとA,Cはどうなる？
　Bをチェック時はCがアクティブになります。Aはアクティブのままチェックが入った状態です。
　Bを非チェック時はCがdisabledになり、Aはアクティブのままです。

＞Cをチェック/非チェックするとA,Bはどうなる？
　Cをチェック時はBもAもアクティブ状態、チェックが入ったままです。
　Cを非チェック時もBもAもアクティブ状態、チェックが入ったままです。

Answer 1

$(function(){
  $(':checkbox').on('change',function(){
    $(this).closest('li').find('>ul>li>span>:checkbox').prop('disabled',!$(this).prop('checked')||$(this).prop('disabled')).trigger('change');
  }).trigger('change');
});