0

I have a situation similar to this one where I have a button that I need to have no pointer events AND show a not-allowed cursor.

The answer given by @Petr Odut worked spectacularly (many thanks) except for the part about the tab index and on focus.

The solution he gave to that problem involves hard coding the tab index and on focus attributes into the specific element. However my element has its disabled class added programmatically with jQuery. Sometimes it is disabled, sometimes it isn't, so I cannot hard code those attributes.

I know I could set those attributes with jQuery at the same time I set the disabled class, but this button is not the only button I'd like to have this functionality for. I'd like some way to set the tab index/on focus globally, so that any disabled button exhibits that behavior.

So, is there a way to do that?

Note: I'm still new on stackoverflow and don't have enough reputation to ask this question directly in a comment on the post, which is why I am doing this. I apologize if asking this way is improper etiquette.

Also, much thanks Petr.

Ilan_Schindler
  • 11
  • 4

1 Answers1

0

Something like this?

and pure JS version:

[...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>
ikiK
  • 6,328
  • 4
  • 20
  • 40
  • Maybe? What happens if you add the disabled using js too, rather than putting it in the html? also, where do I put that js snippet? – Ilan_Schindler Jul 28 '20 at 18:06
  • @Ilan_Schindler This is on page load, add this at end of your `.disabled`. class. add script, and you are all good. You can make snippet by pressing `.<>`. button in editor. – ikiK Jul 28 '20 at 18:12
  • unfortunately, i dont have a specific script for disabling things, although at this point i feel like i probably should. Whenever i need to, i just do `$('element that needs to be disabled').addClass('disabled');`, which i have scattered about. will i need to add this line everywhere i add the class then? – Ilan_Schindler Jul 28 '20 at 18:15
  • @Ilan_Schindler Just add attributes while adding class: `$('element that needs to be disabled').addClass('disabled').attr('tabindex', "-1").attr('onfocus', "this.blur()");` – ikiK Jul 28 '20 at 18:18
  • many thanks for the help. I was hoping that wasnt the solution because we all know how annoying it can be finding every where that needs to be changed. but, thats what i get for copy paste. – Ilan_Schindler Jul 28 '20 at 18:21
  • @Ilan_Schindler Cant help you with that, what needs to be needs to. ;) Cheers – ikiK Jul 28 '20 at 18:23
  • also, what is the inverse of this? for when i re-enable an element. do i just remove the tabindex and onfocus attributes? – Ilan_Schindler Jul 28 '20 at 18:25
  • @Ilan_Schindler You need to set it again to empty : `.attr('tabindex', "").attr('onfocus', "");` – ikiK Jul 28 '20 at 18:26