Установите или снимите флажок родительских родителей с помощью jQuery

Question

Когда я проверил Настройки учетной записи checkbox все дочерние теги li были проверены отлично. но когда я отключил Children li checkbox Добавить и Удалить он снят с охраны Настройки учетной записи тоже.

Я не хочу, чтобы снять Настройки аккаунта при AS Один и AS Два проверяется.

Помогите мне, как это решить.

Здесь Jsfiidle

ниже мой код.

HTML

<ul class="tree" id="tree"> 
    <li> 
     <input type="checkbox" name="account_settings" value="yes">Account Settings 
     <!-- AND SHOULD CHECK HERE --> 
     <ul> 
      <li> 
       <input type="checkbox" name="one" value="one">AS One</li> 
      <li> 
       <input type="checkbox" name="two" value="two">AS Two</li> 
      <li> 
       <input type="checkbox" name="user_roles" value="user_roles">Users &amp; Roles 
       <!-- SHOULD CHECK HERE --> 
       <ul> 
        <li> 
         <input type="checkbox" name="user_role" value="add">Add</li> 
        <li> 
         <input type="checkbox" name="user_role" value="delete">Delete</li> 
        <!-- CHECK HERE --> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <input type="checkbox" name="rl_module" value="yes">RL Module</li> 
    <li> 
     <input type="checkbox" name="rl_module" value="yes">Accounting 
     <ul> 
      <li> 
       <input type="checkbox" name="vat" value="yes">VAT</li> 
      <li> 
       <input type="checkbox" name="bank_account" value="yes">Banking 
       <ul> 
        <li> 
         <input type="checkbox" name="view" value="yes">View</li> 
        <li> 
         <input type="checkbox" name="crud" value="yes">CRUD</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 


$('input[type=checkbox]').click(function() { 
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked')); 
    var sibs = false; 
    $(this).closest('ul').children('li').each(function() { 
      if($('input[type=checkbox]', this).is(':checked')) sibs=true; 
    }) 
    $(this).parents('ul').prev().prop('checked', sibs); 
}); 

Answer 1

Попробуйте

<ul class="tree" id="tree"> 
    <li> 
     <input type="checkbox" name="account_settings" value="yes">Account Settings 
     <ul> 
      <li> 
       <input class="account_settings" type="checkbox" name="one" value="one">AS One 
      </li> 
      <li> 
       <input class="account_settings" type="checkbox" name="two" value="two">AS Two 
      </li> 
      <li> 
       <input class="account_settings" type="checkbox" name="user_roles" value="user_roles">Users &amp; Roles 
       <ul> 
        <li> 
         <input class="account_settings user_roles" type="checkbox" name="user_role" value="add">Add 
        </li> 
        <li> 
         <input class="account_settings user_roles" type="checkbox" name="user_role" value="delete">Delete 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

$('input[type=checkbox]').click(function() { 
    if($(this).prop('checked')) 
    { 
     $('.'+$(this).attr('name')).prop('checked',true); 
    } 
    else 
    { 
     $('.'+$(this).attr('name')).prop('checked',false); 
    } 
    findparent(this); 
}); 
}); 

function findparent(elem) 
{ 
    var flag = 1; 
    var fcount = 0; 
    var count = 0; 
    $(elem).parent().parent().find('li input').each(function (index) { 
     fcount = fcount +1; 
     if($(this).prop('checked') == false) 
      count = count + 1; 
    }); 

    if(count == fcount) 
     flag = 0; 

    if(flag == 0) 
     $(elem).parent().parent().prev().prop('checked',false); 
    else 
     $(elem).parent().parent().prev().prop('checked',true); 
}