How to Disable a Button with jQuery CodeUnit 25 FEB 2010

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

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.

  • 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 =-.

  • 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 =-.

  • 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

  • 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.

  • 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.

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

    • 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.