表单元素 disabled 的判定

测试需求，判定表单元素是否 disabled。

看起来很简单，直接在浏览器控制台里用 $('input[type="text"]) 选中一个 <input>，验证一下它的 disabled 属性，没问题，于是就直接写成：

function isDisabled(element) {
  return element.disabled;
}

后来做到一个用户权限的功能，某一类用户，可以看到某些设置，但不能改。为了省事，就直接 禁用这部分表单。同时，因为我们用 <fieldset> 包装表单元素，于是我就把 disabled 加在 <fieldset> 上，这样可以不需要修改每个元素。

结果测试的时候就失败了，JS 认为这些元素不是 disabled，但视觉上和操作上它们的确被禁用了。于是调试，发现这些元素的 disabled 的确为 false，但是它们可以 .matches(':disabled')，Google 之，StackOverflow 的几个问答也是同样的结果。

于是将前面的函数改成

function isDisabled(element) {
  return element.matches(':disabled');
}

进一步的，我检查了其它几个属性，包括 readonly，required，发现 <fieldset> 只支持 disabled。