Javascript disable button

Question

I am wondering if someone can help me out with this.

I have a button defined as:

<input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/>

I can use jQuery, standard javascript or Dojo to disable the button with onClick event:

$('#myButton').attr('disabled', 'disabled');

The problem I am facing is, even though this code disables the button, onClick event still triggers the function callMe() if I click on the button.

How do I make the disabled button not call the onClick function?

On a side note, you can also pass `true` like `attr('disabled', true)`, just to make it a little clearer perhaps. — pimvdb, Aug 22 '11 at 18:57
@Simon, good idea but that would entail adding this check in the function even though some portions of the app doesnt need this functionality — t0mcat, Aug 22 '11 at 18:59

score 4 · Accepted Answer · answered Aug 22 '11 at 18:54

4

With jQuery you can bind a function that checks if your button is disabled:

$('#myButton').click(function() {
  if (!$(this).is(':disabled')) {
    callMe();
  }
});

answered Aug 22 '11 at 18:54

ldiqual

15,015
6
52
90

score 1 · Answer 2 · answered Aug 22 '11 at 18:54

1

Since you're using jQuery, use

$('#myButton').click(function() { callMe(); this.unbind(); });

instead of onClick.

answered Aug 22 '11 at 18:54

Blazemonger

90,923
26
142
180

Hi mblase, Actually I am using standard Javascript of this as of now. – t0mcat Aug 22 '11 at 18:56

score 0 · Answer 3 · answered Mar 30 '16 at 01:43

Instead of ...

$('#myButton').attr('disabled', 'disabled');

... use ...

$('#myButton')
   .prop('disabled', 'disabled')  // Sets 'disabled' property
   .prop('onclick', null)         // Removes 'onclick' property if found
   .off('click');                 // Removes other events if found

score 0 · Answer 4 · answered Aug 22 '11 at 18:53

0

$('#myButton').click(function(){
    if( !$(this).is('[disabled=disabled]') ){
       ...
    }
});

answered Aug 22 '11 at 18:53

Michael

1,058
10
17

score 0 · Answer 5 · answered Aug 22 '11 at 18:54

0

In the same code where you disable it, simply remove the onclick event handler.

answered Aug 22 '11 at 18:54

Jonathan M

17,145
9
58
91

Hi Jonathan, How to remove the onClick event handler? – t0mcat Aug 22 '11 at 18:56

score 0 · Answer 6 · edited May 23 '17 at 11:59

0

_{you should be using jQuery to attach the click handlers, not adding them inline*}

Just add a check to your click function

$('#myButton').click(function(){
  var $this;
  $this = $(this);
  if ( $this.is(':disabled') ) return;
  callMe();
});

Alternatively,

$('#myButton').click(callMe);

callMe()
{
  var $this;
  $this = $(this);
  if ($this.is(':disabled')) return;
  ...the rest of your code...
}

Or if you insist on using it inline:

onclick="if ($(this).is(':disabled')) return; callMe();"

* I regularly rant about how HTML, CSS & JS fit the definition of MVC

edited May 23 '17 at 11:59

Community

1
1

answered Aug 22 '11 at 18:55

zzzzBov

174,988
54
320
367

Hi zzzzzBov, I dont insist on using inline. I would prefer the better solution, if you say inline isnt good, I wont use it :) – t0mcat Aug 22 '11 at 19:00
@t0mcat, I've updated my answer with links to the reasons why you should avoid inline JS. – zzzzBov Aug 22 '11 at 19:10

score 0 · Answer 7 · answered Aug 22 '11 at 18:56

instead of using onclick attribute, bind to the event

$('#myButton').click(function(e){
    // try it without this
    if($(this).attr('disabled'))
        return false;
    callMe();
    e.preventDefault();
});

try it without the check, not sure if its necessary.

score 0 · Answer 8 · answered Aug 22 '11 at 18:58

This is one way of doing.

$('#myButton').click(function(){
  if(!$(this).hasClass("disabled")){
     //Do stuff here
  }
});

To disable the buttons just add the disabled class to it.

$('#myButton').addClass("disabled");

Add appropriate styles in the disabled class to make button look like disabled or you can also set the disabled property along with setting the class.

Javascript disable button

8 Answers8