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

我有一个按钮面板，我想通过一个方法调用来启用/禁用它。将其推广到要启用/禁用的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>

切换


切换B


切换C


切换D

类似于：

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

你需要什么就做什么

---

编辑：正如其他人所提到的，使用特定的选择器来实现这一点可能是一个好主意，因为如果您需要DOM节点中的特定按钮不因某种原因被禁用，那么以后可能会导致自己的一些UI问题。根据您的代码结构，只需生成可使用此标记禁用的按钮，然后通过该标记进行选择，就可以更轻松地避免在需要保持功能且恰好位于同一节点的按钮上显式撤消禁用效果。

您没有说明运行此操作的事件，但是

#my container

元素中的所有按钮都有一个公共类，因此您可以使用一行代码来启用/禁用它们：

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

---

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

您能显示HTML吗。你不应该为此需要递归。使用公共类和类似

$（'.button'）.prop（'disabled'，false）的东西HTML。我真的想通过DOM节点子树进行隔离，而不是通过类“button”来隔离我的所有按钮。有一个外部按钮，我想打开/关闭
我的控件中的所有内容
为您更新了答案，您只需根据需要修改选择器。我的一些控件是滑块。将该属性应用于每个子节点是否存在问题，然后它只会影响那些可以使用
disabled
属性执行任何操作的节点？是的，在每个子节点上应用disabled将使HTML无效。如果您有滑块，请查看其文档以了解如何禁用它们。