选择子项中的任何项目时如何禁用该组的父复选框

Question

我试图在选择单选按钮时禁用该组的父复选框。我能够在单选时禁用该元素的复选框。但我也只想禁用该组的父复选框。

这里是 Javascript

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

     $('.taxcheck').attr('disabled', false);
     $(this).next("input[type='checkbox']").attr({
         checked: false,
         disabled: true
     });
    $(this).closest(".leve2check input[type='checkbox']").attr({
         checked: false,
         disabled: true
     });

]

我想要做的是在单选按钮检查时，禁用其父级和自身的复选框。

示例：如果我选择 D2 单选按钮禁用 D2 复选框和 D 复选框。 如果我选择 C1 单选按钮而不是禁用 C1 复选框和 C 复选框。

Jsfiddle：https://jsfiddle.net/voo0m6z7/2/

Answer 1

您用来查找父元素的选择器错误。

.closest() 用于查找与您的选择器匹配的最近的祖先（父/祖父），它需要是一个元素，而不是一个类。

由于leve2check 没有包含焦点收音机，它不会返回任何内容。

在这种情况下，您需要首先找到包含您的收音机的父 li。为此，我添加了一个类 (level2)。然后使用.find() 得到它的孩子leve2Check。

看看下面的代码是否按照你想要的方式工作：

$(function() {
  $('.rad').change(function() {
    var $currLvlChk = $(this).next("input[type='checkbox']");
    var $lvl2Chk = $(this).parents('li.level2').find('.leve2check');

    $('.chk').attr('disabled', false);

    $currLvlChk.attr({
      checked: false,
      disabled: true
    });

    $lvl2Chk.attr({
      checked: false,
      disabled: true
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="lvl1">
  <a>
    <h4>A</h4>
  </a>
  <ul>
    <!--Level 2-->
    <li class="level2">
      <input type="radio" class="rad" name="primaryradio" />
      <input type="checkbox" class="chk leve2check" />
      <label>B</label>
      <ul>
        <!--Level 3-->
        <li>
          <input type="radio" class="rad" name="primaryradio" />
          <input type="checkbox" class="chk" />
          <label>B1</label>
        </li>
        <li>
          <input type="radio" class="rad" name="primaryradio" />
          <input type="checkbox" class="chk" />
          <label>B2</label>
        </li>
      </ul>
    </li>
    <li class="level2">
      <input type="radio" class="rad" name="primaryradio" />
      <input type="checkbox" class="chk leve2check" />
      <label>C</label>
      <ul>
        <!--Level 3-->
        <li>
          <input type="radio" class="rad" name="primaryradio" />
          <input type="checkbox" class="chk" />
          <label>C1</label>
        </li>
        <li>
          <input type="radio" class="rad" name="primaryradio" />
          <input type="checkbox" class="chk" />
          <label>C2</label>
        </li>
      </ul>
    </li>
    <li class="level2">
      <input type="radio" class="rad" name="primaryradio" />
      <input type="checkbox" class="chk leve2check" />
      <label>D</label>
      <ul>
        <!--Level 3-->
        <li>
          <input type="radio" class="rad" name="primaryradio" />
          <input type="checkbox" class="chk" />
          <label>D1</label>
        </li>
        <li>
          <input type="radio" class="rad" name="primaryradio" />
          <input type="checkbox" class="chk" />
          <label>D2</label>
        </li>
      </ul>
    </li>
  </ul>
</li>