动态 Jquery 专注

Question

我的情况类似于 this one，我有一个按钮，我需要没有指针事件并显示不允许的光标。

@Petr Odut 给出的答案非常有效（非常感谢），除了关于选项卡索引和焦点的部分。

他为该问题提供的解决方案涉及将选项卡索引和焦点属性硬编码到特定元素中。但是，我的元素已通过 jQuery 以编程方式添加了 disabled class。有时它被禁用，有时它不是，所以我不能对这些属性进行硬编码。

我知道我可以在设置禁用 class 的同时使用 jQuery 设置这些属性，但是这个按钮并不是我希望为其提供此功能的唯一按钮。我想要一些方法来设置选项卡 index/on 全局焦点，以便任何禁用的按钮都表现出该行为。

那么，有没有办法做到这一点？

注意：我还是 Whosebug 的新手，没有足够的声誉直接在 post 的评论中提出这个问题，这就是我这样做的原因。如果这样问是不礼貌的，我深表歉意。

另外，非常感谢 Petr。

Answer 1

是这样的吗？

和纯JS版本：

[...document.querySelectorAll('a.disabled')].forEach(a => {
a.setAttribute("tabindex", "-1");
a.setAttribute("onfocus", "this.blur()");
 console.log(a.getAttribute("tabindex"));
})

$("a.disabled").each(function(i) {
  $(this).attr('tabindex', "-1").attr('onfocus', "this.blur()");
  console.log($(this).attr('tabindex'))
});

/* Adding cursor just works: */

.disabled {
  cursor: not-allowed;
}


/* Makes link non-clickable: */

.disabled:active {
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="url" class="disabled">Disabled link</a>
<a href="url" class="disabled">Disabled link2</a>
<a href="url" class=""> NOT Disabled link3</a>

动态 Jquery 专注

Dynamic Jquery On Focus

javascript

jquery

css

disabled-control