Question

我有一个按钮面板，我希望通过单个方法调用启用/禁用。将此推广到您要启用/禁用的DOM节点的任何类型的用户输入子树。

是否存在现有或普遍接受的最佳做法？或者我必须以这样的方式写自己的东西：

var recursivelyDisable = function(node, shouldDisable) {
  // If there are no children, return
  if (???) return;

  // Grab the next child node

  // Recurse
  recursivelyEnable(childNode);

  // Apply the setting
  node.disabled = shouldDisable;
};

在index.html：

      <div id="my-controls" class="container">
        <div class="row">
          <div class="col-md-1">
            <div class="row">
              <button id='a-toggle' type='button' class='btn btn-default'>Toggle A</button>
            </div>
            <br/>
            <div class="row">
              <button id='b-toggle' type='button' class='btn btn-default'>Toggle B</button>
            </div>
            <br/>
            <div class="row">
              <button id='c-toggle' type='button' class='btn btn-default'>Toggle C</button>
            </div>
            <br/>
            <div class="row">
              <button id='d-toggle' type='button' class='btn btn-default'>Toggle D</button>
            </div>
          </div>
        </div>
      </div>

Answer 1

类似的东西：

$('.selector').find('button').prop('disabled', true);

find function应该做你需要的。

编辑：正如其他人提到的那样，使用特定的选择器来实现这一点可能是一个好主意，因为如果你需要DOM节点中的特定按钮不被禁用，你可能会在以后遇到一些UI问题。某些原因。根据您的代码结构，可能更容易生成可以使用此标记禁用的按钮并由此选择并节省您必须明确撤消对需要保持功能并且正常生效的按钮的禁用效果的工作量在同一节点。

Answer 2

您尚未说明您正在运行此事件的情况，但#my-container元素中的所有按钮都有一个共同的类，因此您可以制作一个单行启用/禁用它们：

$('#my-controls .btn').prop('disabled', true); // disable
$('#my-controls .btn').prop('disabled', false); // enable

这里不需要递归，因为jQuery会将该属性应用于选择器匹配的所有元素。

在div中递归启用/禁用按钮的方法？

2 个答案: