是否可以确定是否在没有jQuery的情况下禁用了任何父级？

Question

考虑HTML：

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

和

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

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

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");

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