如何启用或禁用 jQuery 中的嵌套复选框？

有时，UI/UX设计需要有嵌套的复选框。这使得用户可以在主要选项下选择多个子选项。如果您正在使用jQuery，那么启用或禁用嵌套复选框并不难。

HTML 结构

首先，我们需要一个HTML结构。以下是示例：

<label> 
  <input type="checkbox" name="main-option" value="main-option"> 
  Main Option 
</label> 
<ul> 
  <li> 
    <label> 
      <input type="checkbox" name="sub-option-1" value="sub-option-1" class="sub-option"> 
      Sub Option 1 
    </label> 
  </li> 
  <li> 
    <label> 
      <input type="checkbox" name="sub-option-2" value="sub-option-2" class="sub-option"> 
      Sub Option 2 
    </label> 
  </li> 
</ul>

在此HTML结构中，我们有一个主要选项和两个子选项。主要选项包裹在<label>中，子选项包裹在<ul>和<li>中。我们还为子选项添加了一个类名sub-option。

启用/禁用嵌套复选框

以下是启用/禁用嵌套复选框的jQuery代码：

$('input[name="main-option"]').on('change', function() {
  var isDisabled = !$(this).prop('checked');
  $(this).closest('label').next().find('input[type="checkbox"]').prop('disabled', isDisabled);
});

我们使用了$('input[name="main-option"]').on('change')来监听主要选项的更改。每当主要选项更改时，我们定义一个名为isDisabled的变量。如果主选项已选中，则将其设置为false，否则设置为true。

接下来，我们使用$(this).closest('label').next().find('input[type="checkbox"]')查找父元素的下一个元素中的所有子选项。最后，我们使用.prop('disabled', isDisabled)启用/禁用相应的子复选框。

结论

现在，您应该已经掌握了如何使用jQuery启用/禁用嵌套复选框。这使得设计人员可以创建具有更丰富交互性的UI/UX设计。记得把HTML代码和jQuery代码放在文档就行了！