jQueryでラジオボタン（チェックボックス）を選択したときに付属するラジオボタン（チェックボックス）の選択可否を切り替えたい

前提・実現したいこと

javascript、jQueryを独学で学んでいます。
ラジオボタン（チェックボックス）が入れ子の場合に、parentを選択時、そのchildrenのみ選択可能状態に切り替えるjQueryを組んでいます。

parentにチェックが入っている場合は、それに付随したchildrenのみラジオボタン（チェックボックス）が選択可能な状態にしたいのですが、
どうしても、parentとそのchildrenというのが指定できず、全てのchildrenボタンが切り替わってしまいます。また、元に戻りません。

希望の仕様はこれです。
初期値は、全てのchildrenは選択不可状態
single選択時は全てのchildrenはチェックを外し、選択不可状態
parent選択時は、付随するchildrenのみ選択可能状態にし、他のchildrenはチェックを外し、選択不可状態にする
parentの選択が外れたら、そのchildrenはチェックを外し、選択不可状態にする

行き詰まっています。よろしくお願いします。

HTML

 <ul>
    <li><label><input type="radio" name="item" id="single">single</label></li>
    <li><label><input type="radio" name="item" id="parent">parentA</label>
       <ul>
         <li><label><input type="radio" name="children">children</label></li>
         <li><label><input type="radio" name="children">children</label></li>
      </ul>
    </li>
    <li><label><input type="radio" name="item" id="parent">parentB</label>
       <ul>
         <li><label><input type="radio" name="children">children</label></li>
         <li><label><input type="radio" name="children">children</label></li>
      </ul>
    </li>
    <li><label><input type="checkbox" name="item" id="parent">parentC</label>
       <ul>
         <li><label><input type="checkbox" name="children">children</label></li>
         <li><label><input type="checkbox" name="children">children</label></li>
      </ul>
    </li>
  </ul>

jQuery

$(function(){
  $('input[id=parent]').each(function() {
    //デフォルト
    $('input[name="children"]').prop('checked', false).prop('disabled', true);
    $('input[id=parent]').change(function() {
      //parentがチェックされたら直下のchildrenのみチェック可
      if ($(this).prop("checked")) {
        $('input[name="children"]').prop('checked', true).prop('disabled', false);      
      } else {
        //parentがチェックされていない直下のchildrenはチェック不可
        $('input[name="children"]').prop('checked', false).prop('disabled', true);
      }
    });
  });
});

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じですか？

javascript
1<script>
2$(function(){
3  $('.parent').on('change',function(){
4    $('.parent').closest('li').find('.children').prop('disabled',function(){
5      return !$(this).closest('li:has(.parent)').find('.parent').prop('checked');
6    });
7  }).eq(0).trigger('change');
8});
9</script>
10<ul>
11   <li><label><input type="radio" name="item" class="single parent">single</label></li>
12   <li><label><input type="radio" name="item" class="parent">parentA</label>
13      <ul>
14        <li><label><input type="radio" name="children" class="children">children</label></li>
15        <li><label><input type="radio" name="children" class="children">children</label></li>
16      </ul>
17   </li>
18   <li><label><input type="radio" name="item" class="parent">parentB</label>
19      <ul>
20        <li><label><input type="radio" name="children" class="children">children</label></li>
21        <li><label><input type="radio" name="children" class="children">children</label></li>
22      </ul>
23   </li>
24   <li><label><input type="checkbox" name="item" class="parent">parentC</label>
25      <ul>
26        <li><label><input type="checkbox" name="children" class="children">children</label></li>
27        <li><label><input type="checkbox" name="children" class="children">children</label></li>
28      </ul>
29   </li>
30</ul>