チェックボックスのグループごとにアクティブにしたい

Question

チェックボックスaaa,ccc,gggがあり、
aaaにチェックを入れるとbbbが、
cccにチェックを入れるとddd,eee,fffが、
gggにチェックを入れるとhhh,iii　がアクティブになります。

jsでまとめて書きたいのですが、現状のjsでは
aaaにチェックを入れるとbbbだけでなく、
ddd,eee,fff, hhh,iiiもアクティブになってしまいます。

クラス名：parent--01内のinputをチェックするとnest--01がアクティブに
クラス名：parent--02内のinputをチェックするとnest--02がアクティブに
クラス名：parent--03内のinputをチェックするとnest--03がアクティブに
逆にチェックを外すと非アクティブに　というように
それぞれのグループのみをアクティブ/非アクティブにするには
どのようにすればよろしいでしょうか。

<div><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 class="select--area--sub 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>
     </span>
   </div>


   <div><span class="select--area parent--02">
       <input type="checkbox" name="aaa1" value="1" id="ccc1" class="checkSet" checked="checked"> <label for="ccc1" class="text-checkbox ml-30p">
         <span>ccc</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 class="select--area--sub nest--02">
         <input type="checkbox" name="bbb1" value="1" id="ddd1" class="checkSet"> <label for="ddd1" class="text-checkbox ml-30p">
           <span>ddd</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--sub nest--02">
         <input type="checkbox" name="bbb1" value="1" id="eee1" class="checkSet"> <label for="eee1" class="text-checkbox ml-30p">
           <span>eee</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--sub nest--02">
         <input type="checkbox" name="bbb1" value="1" id="fff1" class="checkSet"> <label for="fff1" class="text-checkbox ml-30p">
           <span>fff</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>
   </div>

   <div><span class="select--area parent--03">
       <input type="checkbox" name="aaa1" value="1" id="ggg1" class="checkSet" checked="checked"> <label for="ggg1" class="text-checkbox ml-30p">
         <span>ggg</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 class="select--area--sub nest--03">
         <input type="checkbox" name="bbb1" value="1" id="hhh1" class="checkSet"> <label for="hhh1" class="text-checkbox ml-30p">
           <span>hhh</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--sub nest--03">
         <input type="checkbox" name="bbb1" value="1" id="iii1" class="checkSet"> <label for="iii1" class="text-checkbox ml-30p">
           <span>iii</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>

   </div>

span[class*="parent--"] label>span{
  font-size:18px;
  font-weight:bold;
}
span[class*="nest--"] label>span{
  font-size:14px;
  font-weight:normal;  
}
span[class*="nest--"].active{
  color:#ff0000;
}

$(function(){
 
  $('span[class*="parent--"]>input').on('change', function () {
    $('span[class*="nest--"]>input').prop('disabled', !$(this).prop('checked'));
    $('span[class*="nest--"]>input').toggleClass('active',$(this).is(':checked'));
  }).trigger('change');
  
 
  
});

Comments

[kyoya0819]

無駄な記述が多いです。
最低限の記述にしてください。

[up24]

失礼しました。
次回よりそのように努めます。

[kyoya0819]

質問は編集可能です。
もし解決していないようでしたら編集していただけるとありがたいです。

Answer 1

<fieldset>を使うと若干処理が簡単になります。 [https://developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset](https://developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset)

span[class*="parent--"]>input ~ fieldset {
  display: inline;
  margin: 0;
  padding: 0;
  border-style: none;
}

/* IE がなければ :enabled でよい */
span[class*="parent--"]>input ~ fieldset:not([disabled]) span[class*="nest--"] {
  color: #ff0000;
}

  $('span[class*="parent--"]>input').on('change', function(event) {
    const target = $(event.target);
    const disabled = !target.prop('checked');
    target.siblings('fieldset').prop('disabled', disabled);
  }).trigger('change');

Answer 2

.select--areaまでさかのぼってからfindすればよいでしょう
またクラスのつける場所がinputではなくその上のspanですよね？

$(function(){
  $('span[class*="parent--"]>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)
  }).trigger('change');
});

Comments

[up24]

たしかに、個々から親をたどって見ればよいのですね。
ありがとうございます。