2

I am trying to disable a bunch of elements (divs that have onClick and other custom events) while a request is taking place.

I have tried with:

$("selector").children().prop("disabled", true);

Also with:

$("selector").children().attr("disabled", true);

Also with:

$("selector").children().attr("disabled", "disabled");

Neither of these worked, meaning that, they all kept their functionality even after disabled was applied to them.

To confirm that I am actually able to target all of the desired elements I tested with:

$("selector").children().css({backgroundColor: "black"});

All elements became black, so the targeting is correct.

I am open to any other suggestions on how to disable elements, basicly these are divs that should not be clickable (there are other events of interest, not just the click), for the duration of a request, once a div is clicked, that is why I am trying to temporarily disable them, and re-enable them again, once I receive the response.

Darkbound
  • 3,026
  • 7
  • 34
  • 72
  • Does this answer your question? [How to disable HTML button using JavaScript?](https://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript) – M-Chen-3 Dec 07 '20 at 22:26
  • @M-Chen-3 it is what I have tried to do, but it doesnt work for me. I don't know how to provide minimal example in this case, as it is all within a large shopify theme. I can see the disabled attribute being applied to the elements (which are divs), but it doesnt take effect. – Darkbound Dec 07 '20 at 22:29
  • 1
    @Darkbound That right there is your problem. You need to disable the buttons, not the divs. – M-Chen-3 Dec 07 '20 at 22:30
  • 1
    Are you SURE the elements you wish to disable are ` – Louys Patrice Bessette Dec 07 '20 at 22:30
  • 2
    @M-Chen-3 okay, but I don't have buttons, I have divs, is it possible to do it with divs? Or do I have to re-do them into buttons? – Darkbound Dec 07 '20 at 22:30
  • What does it even mean to disable a div? – Countour-Integral Dec 07 '20 at 22:32
  • If using `divs` I'd just add a class of `disabled` with `addClass` and remove with `removeClass` -- You can control your cursor, color etc etc that way with CSS classes, and you'll be able to check the class on the button action IE `click` with `.hasClass("disabled")` – Zak Dec 07 '20 at 22:32
  • 3
    Since the element are NOT ` – Louys Patrice Bessette Dec 07 '20 at 22:33
  • 1
    And `$("selector").children().css({pointerEvents: "initial"});` to restore... – Louys Patrice Bessette Dec 07 '20 at 22:34
  • Thanks guys, I have corrected my description to specify that these are divs and not button elements, that was my mistake. The css with `pointerEvents` did the trick! Thank you! Someone can add the answer officially, so that I can accept it. – Darkbound Dec 07 '20 at 22:36
  • 1
    @Darkbound: I would suggest a title change to your question... While I can do it myself (lol), I prefer you do it yourself if you agree on the idea. So the idea is to change `Disable elements with jQuery (or js)` to `How to disable non-input elements?` or something like... ;) That, for future readers. – Louys Patrice Bessette Dec 07 '20 at 23:45

1 Answers1

4

The disabled property only applies to input elements, such as <input> and <button> for example. It does not apply to some <div> or <li> styled to look like a button or input (could be a div content editable).

To disable an element that is not a "real" input element, you can use $("selector").children().css({pointerEvents: "none"}); which will just prevent ALL events on that element and childs, no matter the event handlers binded.

To restore: $("selector").children().css({pointerEvents: "initial"});

pointer-events documentation



Edit to adress comments about keyboard events:

$("selector").children().prop("tabIndex",-1); will avoid a tab navigation to access an <input> or <button>.

tabindex documentation

But since your elements are <div>... I don't really think that is relevant. But try it and see if that add-on code really is necessary and feel free to comment for future readers. ;)

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64