在不使用 Jquery 的情况下覆盖字段集禁用属性（仅在 HTML 中）答案

【问题标题】：Override fieldset disabled attribute without using Jquery(Only in HTML)在不使用 Jquery 的情况下覆盖字段集禁用属性（仅在 HTML 中）
【发布时间】：2019-08-08 02:17:11
【问题描述】：

我有一个包含许多 <input> 元素的复杂表单，其中大部分我需要有条件地禁用（通过 AngularJS 来精确，但这个问题主要针对 HTML 方面）。

为了避免必须在每个元素上设置禁用属性，我将输入放入<fieldset> 并设置一次禁用属性。这会禁用所有包含的输入字段。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Fieldsets</title>
</head>

<body>
  <form>
    <fieldset disabled="true">

      <input type="text" placeholder="first">
      <input type="text" placeholder="second">

      <!-- many, many more -->

      <!-- trying to override here -->
      <input type="text" placeholder="last" disabled="false">

    </fieldset>
  </form>
</body>

</html>

现在我需要做一些例外并保持启用一些输入，即使周围的<fieldset> 被禁用。我尝试通过设置disabled="false" 覆盖那里的属性，但这不起作用。

有什么优雅的方法可以覆盖 disabled 属性吗？

【问题讨论】：

CSS 在任何情况下都无法设置或取消设置 disabled 属性，所以不行：您需要使用某种 JavaScript 来处理这个问题。
这不能在纯 HTML 或 CSS 中完成。如果你愿意找一个纯js或者jquery的解决方案那我可以帮你。

标签： html fieldset disabled-control

【解决方案1】：

$.each($("fieldset[disabled='true']"),function(index,value){
    $(value).removeAttr("disabled");
  $.each($(value).find("input"),function(index,value) {
    if($(value).attr("disabled")){
        $(value).removeAttr("disabled");
    } else {
        $(value).attr("disabled","true");
    }
  })
});

我使用 Jquery 来解决这个问题。我发现每个设置为禁用的字段集并删除了该禁用属性。然后对于找到的每个字段集，我在每个字段集中找到了输入元素，并且对于每个具有禁用属性的输入字段，我已经删除了属性（禁用）。我还向未使用 disabled=false 属性设置的其他输入字段添加了禁用属性。

您还可以检查 angularjs 的 api：https://docs.angularjs.org/api/ng/function/angular.element

【讨论】：

"...不使用 [jQuery]（仅在 HTML 中），" 如果该代码 had 回答了问题，那么您d 仍然需要解释它是如何工作的，它做了什么（是的，我可以阅读它，OP - 以及其他有类似问题的未来访问者 - 可能不会，这减少了他们从中学习任何有用的东西的机会）。