表单元素 disabled 的判定

判断一个表单元素是否为 disabled,应该使用 `.matches(‘: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');
}

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

作者: meathill

爱编程,爱旅游,爱吐槽。 今年的目标是完成并运营至少一个 Side Project。 《Electron + Vue 实战开发》龟速创作中……

欢迎吐槽,请勿装死

This site uses Akismet to reduce spam. Learn how your comment data is processed.