Question

我正在尝试在选择单选按钮时禁用该组的父复选框。我可以在无线电选择时禁用该元素的复选框。但我也只想禁用该组的父复选框。

这是Javascript

navigateFallback

我想做的是点击单选按钮，禁用其父级和自身的复选框。

示例：如果我选择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>

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

1 个答案: