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

在 jQuery 中，我们可以使用嵌套复选框来实现一些复杂的表单操作，比如树状结构的选择框。本文将介绍如何启用或禁用 jQuery 中的嵌套复选框。

逐级遍历树形结构

首先，我们需要使用递归的方法逐级遍历树形结构，检查每个复选框的状态，以确定该节点是否被选中。以下是一个简单的递归函数：

function isChecked($node) {
  var isChecked = false;
  if ($node.is(':checked')) {
    isChecked = true;
  } else {
    $node.siblings('ul').find('input[type="checkbox"]').each(function() {
      if (isChecked($(this))) {
        isChecked = true;
        return false;
      }
    });
  }
  return isChecked;
}

该函数接受一个 jQuery 对象作为参数，该对象表示当前节点的复选框。函数将递归遍历树形结构中当前节点的子节点，并检查它们的状态，最终返回当前节点是否被选中。

启用或禁用父级复选框

一旦我们确定了当前节点的状态，我们就可以递归遍历其父节点，并相应地启用或禁用它们的复选框。以下是一个根据子节点状态更新父节点状态的函数：

function updateParent($node) {
  var $parent = $node.parents('ul').siblings('input[type="checkbox"]');
  if ($parent.length > 0) {
    var isChecked = false;
    $node.parents('ul').find('input[type="checkbox"]').each(function() {
      if (isChecked($(this))) {
        isChecked = true;
        return false;
      }
    });
    $parent.prop('checked', isChecked);
    updateParent($parent);
  }
}

该函数接受一个 jQuery 对象作为参数，该对象表示当前节点的复选框。函数将递归遍历其父节点，并根据子节点的状态来更新父节点的状态。

监听复选框状态变化

最后，我们需要使用 jQuery 的事件机制来监听复选框状态的变化，然后相应地调用上述函数。以下是一个简单的监听函数：

$(document).on('change', 'input[type="checkbox"]', function() {
  updateParent($(this));
});

该函数使用 jQuery 的 on() 方法来监听 change 事件，然后调用 updateParent() 函数来更新父节点的状态。

到此为止，我们已经介绍了如何启用或禁用 jQuery 中的嵌套复选框。完整代码如下：

function isChecked($node) {
  var isChecked = false;
  if ($node.is(':checked')) {
    isChecked = true;
  } else {
    $node.siblings('ul').find('input[type="checkbox"]').each(function() {
      if (isChecked($(this))) {
        isChecked = true;
        return false;
      }
    });
  }
  return isChecked;
}

function updateParent($node) {
  var $parent = $node.parents('ul').siblings('input[type="checkbox"]');
  if ($parent.length > 0) {
    var isChecked = false;
    $node.parents('ul').find('input[type="checkbox"]').each(function() {
      if (isChecked($(this))) {
        isChecked = true;
        return false;
      }
    });
    $parent.prop('checked', isChecked);
    updateParent($parent);
  }
}

$(document).on('change', 'input[type="checkbox"]', function() {
  updateParent($(this));
});

注意，以上代码仅适用于一维嵌套复选框结构，如果你的复选框结构比较复杂，还需要进行一些额外的操作来实现相应的功能。