如果检查当前元素,则jquery取消选中parent

Question

我有以下HTML标记

<ul>
    <li><label><input class="user" name="profiles[]" type="checkbox" value="1">Smith</label></li>
    <li><label><input class="user" name="profiles[]" type="checkbox"  value="2">Emma</label></li>
    <li><label><input class="user" name="profiles[]" type="checkbox"  value="3">Peter</label></li>
    <li>
        <span><input class="user" name="profiles[]"  type="checkbox" value="admin"></span><a href="#">Admins<i class="fa fa- caret-down"></i></a>           
        <ul class="" style="display:  block;"> 
            <li><label><input class="user" name="profiles[]" type="checkbox" value="michael">Michael</label></li>
            <li><label><input class="user" name="profiles[]" type="checkbox" value="ashley">Ashley</label></li>
            <li>
        <span><input class="user" name="profiles[]"  type="checkbox" value="robert"></span><a href="#">Robert<i class="fa fa- caret-down"></i></a>

               <ul class="" style="display:  block;"> 
      <li><label><input class="user"  name="profiles[]" type="checkbox" value="steve">Steve</label></li>
      <li><label><input class="user" name="profiles[]" type="checkbox" value="jennifer">Jennifer</label></li>
       <li><label><input class="user" name="profiles[]" type="checkbox" value="rock">Rock</label>
           </ul>

        </li>

       <li><label><input class="user" name="profiles[]" type="checkbox" value="jack">Jack</label></li>
        </ul>
    </li>
</ul> 

http://jsfiddle.net/ckoe9q3L/5/

当用户检查管理员,然后检查迈克尔时,我希望它取消选中管理员.

如果用户检查迈克尔,我无法取消选中管理员

另一个例子用户检查罗伯特,然后检查史蒂夫.所以它应该取消选中Admin和Robert,但要检查Steve

$('.user').change(function() {

    var c = this.checked;

    if (c) {
        $(this).parent().find(':checkbox').prop('checked', false);
    }
}

Answer 1

你可以做点什么

//target only checkboxes in the second level
$('li ul input.user').change(function() {
  $(this).closest('ul').siblings('span').find('input').prop('checked', false)
});
//if want to uncheck Michael when Admins is clicked
$('li:has(ul) > span input.user').change(function() {
  $(this).parent().siblings('ul').find('input').prop('checked', false)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>
      <input class="user" name="profiles[]" type="checkbox" value="1" />Smith</label>
  </li>
  <li>
    <label>
      <input class="user" name="profiles[]" type="checkbox" value="2" />Emma</label>
  </li>
  <li>
    <label>
      <input class="user" name="profiles[]" type="checkbox" value="3" />Peter</label>
  </li>

  <li><span><input class="user" name="profiles[]"  type="checkbox" value="admin"/></span><a href="#">Admins<i class="fa fa- caret-down"></i></a> 
    <ul class="" style="display:  block;">
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="michael" />Michael</label>
      </li>
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="ashley" />Ashley</label>
      </li>
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="robert" />Robert</label>
      </li>
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="jack" />Jack</label>
      </li>
    </ul>
  </li>
</ul>