How to Disable a Button with jQuery

Posted on February 25, 2010 by Craig Lotter

Disabling a button on a webpage using jQuery is remarkable simple – just set the selected button’s disabled attribute to true, in other words, make use of a .attr(‘disabled’,true) function call.

This can then obviously be extended to disabling all buttons on a webpage using the following snippet of code:

$('input[type=button]').attr('disabled', true);

Like I said, remarkably simple. (Obviously to enable you simply set the attribute to false again!)

Related Posts :

About Craig Lotter

Craig Lotter is an established web developer and application programmer, with strong creative urges (which keep bursting out at the most inopportune moments) and a seemingly insatiable need to love all things animated. Living in the beautiful coastal town of Gordon's Bay in South Africa, he games, develops, takes in animated fare, trains under the Funakoshi karate style and for the most part, simply enjoys life with his amazing wife and daughter. Oh, and he draws ever now and then too.
This entry was posted in Technology & Code, Tutorials and tagged , , , . Bookmark the permalink.
  • http://www.midnightprogrammer.net/ Prashant

    I have checked other resources and this is the one which is most simple and affective.

    Thanks for sharing
    .-= Prashant ´s last blog ..Calling ASP.NET Web Service Using Jquery – Part II – Passing Parameters =-.

  • http://www.midnightprogrammer.net Prashant

    I have checked other resources and this is the one which is most simple and affective.

    Thanks for sharing
    .-= Prashant ´s last blog ..Calling ASP.NET Web Service Using Jquery – Part II – Passing Parameters =-.

  • http://www.craiglotter.co.za Craig Lotter

    No problemo! :)

  • http://www.craiglotter.co.za Craig Lotter

    No problemo! :)

  • Mahesh

    $('#<%= btnEdit.ClientID %>').attr('disabled', 'disabled');
    the above line disables the button in IE, firefox, chrome
    but the problem is in firefox and chrome it doesn't grey out the button when its disabled

    any solution for that?

    Thanks

  • http://www.craiglotter.co.za Craig Lotter

    Hmm, outside of applying a css style to the disabled element I can't really thing of a native solution to that problem to be honest.

  • http://www.craiglotter.co.za Craig Lotter

    Brilliant. I can't remember it, I look it up on my blog and BAM, I'm in business again! :)

  • Test

    thanks a lot. saved my time..

  • Thiyagarajan Veluchamy

    Thanks

  • Jg

    This works for me in ie, but fails to disable the button in firefox:
    document.getElementById(“ctl00_StandardMaster_btnTrSubmit”).disabled = “true”;

    I have tried other methods, including these suggested in this thread, but none of these succeed in disabling the button in firefox for me:
    $(‘input[type=button]‘).attr(‘disabled’, true);
    $(‘#’).attr(‘disabled’, ‘disabled’);

    What the hell? All I’m trying to do is disable a freaking button with javascript in firefox, can’t get anything to work.

  • http://twitter.com/jamusreynolds Jamie Reynolds

    Nice one. Does this work on all ‘modern browsers’?

  • http://www.craiglotter.co.za Craig Lotter

    Yes, though the jQuery call has since changed. jQuery now uses a .prop to set property values like disable instead of the old .attr method.