Perform click event on disabled button using javascript or jquery

Question

I have a form in which i have a disabled button. When user click on that button, i want to show alert msg .

code of my form:-

      <form>
       <input type="button" id="btn" value="Click" disabled>
       </form>

Code of jquery:-

         <script src="path of jquery">
        <script type="text/javascript">

         $(document).on('click',function(e){
         if(e.target.id == "btn" && e.target.disabled){
         alert("The button is clicked.");
         }
          });
        </script>

The above code is not working in any browser except google chrome. Please tell me how to make it.

precisely, if you have disabled button you cant perform action with it. try using style sheet to get similar disabled look and feel and handle click event — Lin, May 19 '14 at 05:48
See if this helps... http://stackoverflow.com/questions/3100319/event-on-a-disabled-input — Anthony Chu, May 19 '14 at 05:49
@abhitalks : disabled syntax is correct. Refer: http://www.w3schools.com/tags/att_input_disabled.asp — K K, May 19 '14 at 05:49
No syntax error in disabled button. I want to perform click event on that button. The above code is working in chrome not in other browser — user3440583, May 19 '14 at 05:52
@KamleshKushwaha: oth yes, "disabled" is a boolean property and in HTML5 this syntax is correct. you are right on the syntax part. i am taking back my comment. — Abhitalks, May 19 '14 at 05:54
@user3440583: if it is working doesn't actually mean it is the right way to do it. disabled means disabled, you shouldn't be working around that. — Abhitalks, May 19 '14 at 05:57
Why dont you check it via js. ie Use a custom attribute data-disabled="true" and on click of the button check this attribute and work accordingly. $(this).attr('data-disable')==true condition. — SSS, May 19 '14 at 06:05
@abhitalks We don't need a w3fools link every time someone links to w3schools. Just because some small portion of their information is wrong, that doesn't mean all of it is. — JLRishe, May 19 '14 at 06:10
@JLRishe: Agreed. I admitted that mistake to the commenter as well. My bad there. W3Schools just puts me off badly though :) — Abhitalks, May 19 '14 at 06:21

score 0 · Answer 1 · answered May 19 '14 at 05:53

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

Work around:

Style the date fields to look as if they are disabled. Make a hidden "use_date" form field with a bit value to determine whether to use the date fields during processing. Add new function to onClick of the date fields which will change the style class to appear enabled and set the "use_date" value to 1.

another way

Use readonly instead of disabled

For checkboxes at least, this makes them look disabled but behave normally (tested on Google Chrome). You'll have to catch the click and prevent the default action of the event as appropriate.

You could put a div around the submit button and attach a click function to that for when the submit button is disabled:

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
if (attr('submit-button', 'disabled') == 'true')
{
alert('Button Disabled')
}
});

This is just code from the top of my head, so it might not be exactly right. But you get the poin

`disabled` property exists for a purpose. if you find yourself working around that, it means there is something wrong with the logic. — Abhitalks, May 19 '14 at 06:02
@abhitalks Why? It seems reasonable to me that OP would want to give a visual indicator that the button is unusable, but still show the user a message if they try to click it. — JLRishe, May 19 '14 at 06:09
@JLRishe: A `title` would be more appropriate in that case, IMO. — Abhitalks, May 19 '14 at 06:11
@abhitalks `title`s aren't very helpful if the user is on a mobile device. — JLRishe, May 19 '14 at 06:16
@JLRishe: Your argument is good. But, I have never seen iOS alerting me about "disabled" buttons ever. And IMO it is the best mobile UX ever. — Abhitalks, May 19 '14 at 06:19

vintot · Answer 2 · 2014-05-19T06:36:30.353

0

I think you can not do that, but here is a workaround for you, I hope it helps.

put the button in a div then add your function

<form>
    <div id="btnContainer">
   <input type="button" id="btn" value="Click" disabled>
     </div>
</form>

...

$("#btnContainer").click(function(){
    if($("#btn").is(":disabled")){
       alert("The button is disabled.");
    }
});

http://fiddle.jshell.net/LRP7q/1/

edited May 19 '14 at 06:36

answered May 19 '14 at 05:54

vintot

260
1
2
10

4

this is a joke, right? – Abhitalks May 19 '14 at 06:00
@abhitalks What's so funny about it? Seems like a decent workaround to me, although realistically the event should check whether the button is disabled or not. – JLRishe May 19 '14 at 06:11
@JLRishe: Yes you are right. This is a workaround indeed. It's really not worth it to defeat the semantics, esp in this case, IMO. But then, I am only dropping a comment, am not downvoting. – Abhitalks May 19 '14 at 06:17
The above code works when click on div bt not when click on button – user3440583 May 19 '14 at 06:35

Bobz · Answer 3 · 2014-05-19T06:12:17.793

0

Browsers disable events on disabled elements. If it is working in jQuery, it is most likely a bug. Found this from google - http://bugs.jqueryui.com/ticket/5945

But if you really want the user to interact with the disabled button, easiest way is to disable it without using the 'disabled' html attribute. You can do it in various ways, including:

Mimicking disabled style with CSS (button is not really disabled, but just appears so)
Disable the button, but add an overlay over it and attach event to it

How about showing a tooltip (title) to convey your message to the user instead of letting them click? eg:

<form>
    <input type="button" id="btn" value="Click" title="This button is disabled" disabled>
</form>

Above would be a better solution w.r.t accessibility too.

edited May 19 '14 at 06:12

answered May 19 '14 at 06:06

Bobz

2,394
1
19
20

Tooltips aren't very helpful if the user is on a mobile device. – JLRishe May 19 '14 at 06:13
Agree, at least until mobile devices start supporting hover, they will soon :). But ideally a user shouldn't click on a disabled button too. Also I wouldn't recommend using alert (use a widget like Message Dialog or inline Message Area or Toaster) in a professional website as well! – Bobz May 19 '14 at 06:35

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

Found this on other forum.

Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled. Any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree. Correct me if I'm wrong, but if you click on the disabled button, the source of the event is the disabled button and the click event is completely wiped out. The browser literally doesn't know the button got clicked, nor does it pass the click event on. It's as if you are clicking on a black hole on the web page.

So another solution for this is you can wrap your disabled element around DIV and listen events on that DIV

Perform click event on disabled button using javascript or jquery

4 Answers4

Example Fiddle

Linked