在 div 中递归 enable/disable 按钮的方法?

Method to recursively enable/disable buttons within a div?

我有一个按钮面板,我想 enable/disable 通过单个方法调用。将此推广到您想要 enable/disable.

的 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>

类似于:

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

find function 应该可以满足您的需求。

编辑:正如其他人所提到的,使用特定的 select 或完成此操作可能是个好主意,因为如果您需要DOM 节点中的特定按钮不会因某种原因被禁用。根据您的代码结构,只生成可以使用此标签禁用的按钮和 select 可能更容易,并且可以节省您必须明确撤消对需要保持功能的按钮的禁用效果的工作并且恰好住在同一个节点。

您没有说明您 运行 在哪个事件下,但是 #my-container 元素中的所有按钮都有一个共同的 class,因此您可以制作一个-衬里 enable/disable 他们:

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

此处不需要递归,因为 jQuery 会将 属性 应用于选择器匹配的所有元素。