creating alert when a button is disabled

Question

Why am I unable to create an alert when a button is disabled. But when the button is enabled I can get the alerts?

$(document).on('click', '#printpage', function() {
  alert('clicked');
if ($("#printpage").is(":disabled")) {
   alert("Disabled");
 } else {
   alert("enabled");
 }
});

Because the button is disabled.. ? And thus the click event isn't triggered. — Adrian, May 10 '19 at 14:33
This answer from another thread might be useful: https://stackoverflow.com/a/924731 — mikebrsv, May 10 '19 at 14:37

Radonirina Maminiaina · Accepted Answer · 2019-05-10T14:41:36.453

2

Disabled button is not clickable. If you want alert, use class instead of disabled attribute and stylize it with css.

$(document).on('click', '#printpage', function() {
if ($("#printpage").is(".disabled")) {
   alert("Disabled");
 } else {
   alert("enabled");
 }
});

.disabled {
    cursor: not-allowed;
    opacity: .5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="disabled" id="printpage">Print</button>

edited May 10 '19 at 14:41

answered May 10 '19 at 14:33

Radonirina Maminiaina

6,958
4
33
60

"Disabling" a button using a class rather than the attribute doesn't provide the same effect - there might be a reason why the `disabled` attribute was used. – Adrian May 10 '19 at 14:37
this is what I am trying to do https://stackoverflow.com/questions/56064816/adding-warning-when-button-is-disabled – David Brierton May 10 '19 at 14:39
@Adriani6, yes, you're right, but he wants the button to be clickable. I think, this is the only way to do this. Correct if I'm wrong – Radonirina Maminiaina May 10 '19 at 14:39
you can see my example above – David Brierton May 10 '19 at 14:40
thats the full picture. my complete goal is to be able to prompt the user to check all required fields when the button is clicked if all required fields are not already checked – David Brierton May 10 '19 at 14:42
is your class disabled the same as this disabled below? – David Brierton May 10 '19 at 14:47
`let checkboxes = [...document.querySelectorAll('input[type=checkbox].required')]; let checkCheckboxes = () => document.querySelector('#printpage').disabled = checkboxes.some(check => !check.checked); checkboxes.forEach(check => check.addEventListener('input', checkCheckboxes)); checkCheckboxes();` – David Brierton May 10 '19 at 14:47
Actually no! You need to add `pointer-events: none` but with it too, it will not clickable – Radonirina Maminiaina May 10 '19 at 14:48
@RadonirinaMaminiaina any chance you can look at my example here and show me what I can do to have an alert pop up when the button is disabled? https://stackoverflow.com/questions/56064816/adding-warning-when-button-is-disabled – David Brierton May 10 '19 at 14:57
You really want an alert when user clicks to disabled button? – Radonirina Maminiaina May 10 '19 at 15:00
I want to be able to pop something up saying please check all required fields – David Brierton May 10 '19 at 15:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/193151/discussion-between-radonirina-maminiaina-and-david-brierton). – Radonirina Maminiaina May 10 '19 at 15:03

score 0 · Answer 2 · answered May 10 '19 at 14:43

You could also float an invisible element over the top of the button and put an onclick event on that. Obviously, you'd need to remove the element when you enabled the button. However, you'd always need to disable/enable the button through a function rather than simply setting the disabled attribute on the button itself.

creating alert when a button is disabled

2 Answers2