CODEWITHSUNDEEP
jquery
Tom
Tom

Reputation: 6707

how to disable/enable a button by jquery

how to disable/enable a specific button by jquery ( by name )?

The button does not have ID , just this code:

<button onclick="$('ChangeAction').value='SaveAndDoOrder';" value="Bye" name="SaveAndDoOrder" type="submit">
        <i class="Icon ContinueIconTiny"></i>
        <span class="SelectedItem">Bye</span>
      </button>

Upvotes: 6

Views: 6219

Answers (7)

Jonathan Lin
Jonathan Lin

Reputation: 20694

I use jQuery's prop():

$('#generate').click(function() {
    $(this).prop('disabled', true);
}

To enable the button again, do:

$(this).prop('disabled', false);

somewhere in your code.

Upvotes: 0

Umesh K.
Umesh K.

Reputation: 311

Assuming the button is:

 <asp:Button runat="server" ID="btn1" Text="button!"/>

then disabling will be done so:

$(document).ready  (function () {
    var a = $('#btn1');
    a.attr("disabled", function () {
        return "disabled";
    });     
});

Works perfectly

Upvotes: 0

bevacqua
bevacqua

Reputation: 48476

Create and use a jQuery plugin:

; (function($) {
    $.fn.enable = function(b) {
        return this.each(function() {
            this.disabled = !b;
        });
    };
})(jQuery);

use it like this

$(selector).enable(true|false);

Upvotes: 0

Phil Helix
Phil Helix

Reputation: 3723

This is the code I use to disable or re-enable a control:

function handleControlDisplay(className, foundCount, checked) {



    var button = jQuery(className);



    if (foundCount > 0 && foundCount == checked) {

        // enable

        button.removeAttr("disabled");

    }

    else {

        // set the disabled attribute

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

    };

}

Upvotes: 0

Chris Van Opstal
Chris Van Opstal

Reputation: 37537

I would recommend using ID instead of name, like: 

$("#myButton").attr("disabled", true);

This will add the disabled attribute to the button which your browser will then automaticallly disable. If you want to use name you can use it like this:

$("button[name=myButton]").attr("disabled", true);

Upvotes: 10

Spudley
Spudley

Reputation: 168655

At least one answer has already been given which should work.

What I'd say though is that you'd be well advised to always have an ID on your elements, and not just rely on the name attribute. The name attribute is really only intended as a marker for posting form items.

CSS and the Javascript DOM are both optimised to look at IDs. You can do it by name, as in the answers you've already been given, but it's much less efficient - even if you can do it in the same amount of code, the browser will have to do more work behind the scenes.

Also some of the techniques for accessing elements by name are not available in all browsers (older versions of IE in particular have issues with [attribute] classes in CSS).

Upvotes: 0

David Hancock
David Hancock

Reputation: 14991

Try this:

$("button[name=SaveAndDoOrder]").attr("disabled", "disabled");

That will disable a button with a name attribute equal to nameOfButton.

$("button[name=SaveAndDoOrder]").removeAttr("disabled");

That will remove the disable attribute from the same button.

Upvotes: 7

Related Questions