3

I have this line of jQuery which disables all buttons once an event has been triggered. 

$("button").attr("disabled", "disabled");

Disabled buttons are greyed-out by default, but I was wondering if there was a way to override this behaviour so that the buttons are disabled, but with no indication to the user?

Thanks.

Leke
  • 823
  • 3
  • 14
  • 27

1 Answers1

4

Via CSS:

One solution is to set the same style for disabled and enabled buttons using the button[disabled] css selector like this:

button[disabled], button{
        color:#fff;
        border: none;
        background-color: grey;
    }

The problem is that browsers have different styles for buttons by default, so you will need to style your buttons.

Via Jquery:

Another solution is to remove the click event handler to the buttons, so replace this line:

$("button").attr("disabled", "disabled");

for this one:

$('button').off('click');

To enable the click event again use:

$('button').on('click');

More info about add/remove events handler on this good answer at SO

Note: You should add id for the buttons (if you are using more than one) because the code above will remove the click on all your buttons.

Community
  • 1
  • 1
Tom Sarduy
  • 16,482
  • 8
  • 64
  • 83
  • Thanks Tom :) I couldn't get $('button').off('click'); working, but while researching your answer, came across... $('button').attr('onclick','').unbind('click'); which seems to do the job. – Leke Nov 24 '12 at 09:52
  • and yes, you can use bind/unbind for versions of Jquery before < 1.7 ;) – Tom Sarduy Nov 24 '12 at 10:19