javascript - 是否可以在没有 jQuery 的情况下确定是否有任何父项被禁用？

Question

考虑 HTML:

<button disabled='true'>
  <span class='one'>
    <span class='two'>
      Click me
    </span>
  </span>
</button>

和

el = document.querySelector('.two');

有没有办法在不使用 jQuery 或迭代所有父级的情况下确定 el 被禁用？

Answer 1

有几种方法可以检查元素(或其任何父元素)是否被禁用。两者都涉及使用 css 方法检查属性。

第一个是在第二个命令中使用 .closest() 方法 ( MDN page )

var el = document.querySelector('.two');
if(el.closest('[disabled=true]')!=null) console.log("it's disabled");

第二个可以在一行中完成，但您必须检查两个单独的 css 条件(用逗号分隔):

var el2 = document.querySelector('[disabled=true] .two, .two[disabled=true]');
if(el2!=null) console.log("it's disabled");

使用此方法，首先检查它是否有禁用的父级。其次，您必须检查该项目本身是否被禁用。