如何用JavaScript判断表单元素是否自身或父级fieldset被禁用？

我们知道表单控件会因为两种情况处于不可用状态，但元素的disabled DOM属性仅在自身设置禁用时才会反映为自身属性的状态，那要怎么区分元素是自身被禁用还是因父级fieldset被禁用呢？

首先明确HTML规范里的禁用规则：

表单控件在以下任一情况下会被禁用：

• 元素为button、input、select、textarea或关联表单的自定义元素，且自身指定了disabled属性（无论属性值如何）；
• 元素是带有disabled属性的fieldset元素的后代，且不是该fieldset元素第一个legend子元素的后代（如果存在的话）。

判断方法 #

核心思路是区分元素自身是否存在disabled HTML属性，以及元素的disabled DOM属性状态：

1. 如果元素的disabled DOM属性为false：元素处于可用状态，无需进一步判断。
2. 如果disabled DOM属性为true：
   • 用element.hasAttribute('disabled')检查元素是否自身设置了disabled属性：
     • 返回true：元素是自身被禁用；
     • 返回false：元素是因父级fieldset被禁用。

代码示例 #

HTML结构

<!-- 因父级fieldset禁用的输入框 -->
<fieldset disabled>
  <input id="field-disabled-input" />
</fieldset>

<!-- 因父级fieldset禁用的按钮 -->
<fieldset disabled>
  <button type="button" id="field-disabled-btn">按钮</button>
</fieldset>

<!-- 自身禁用的输入框 -->
<input id="self-disabled-input" disabled />

JavaScript判断函数

function getDisabledReason(element) {
  if (!element.disabled) {
    return '元素处于可用状态';
  }
  
  const hasSelfDisabled = element.hasAttribute('disabled');
  return hasSelfDisabled ? '元素自身被禁用' : '元素因父级fieldset被禁用';
}

// 测试输出
console.log(getDisabledReason(document.querySelector("#field-disabled-input")));
console.log(getDisabledReason(document.querySelector("#field-disabled-btn")));
console.log(getDisabledReason(document.querySelector("#self-disabled-input")));

补充说明 #

• element.hasAttribute('disabled')会直接检查元素的HTML属性是否存在，哪怕属性值是disabled="false"这类无效值，也会判定为自身禁用（符合规范要求）；
• element.disabled是DOM提供的属性，会自动根据元素自身或父级fieldset的状态返回正确的禁用状态，无需手动遍历父元素。

内容的提问来源于stack exchange，提问作者Luke Vo