Disable/enable an input with jQuery?

Question

$input.disabled = true;

or

$input.disabled = "disabled";

Which is the standard way? And, conversely, how do you enable a disabled input?

Solution 1

jQuery 1.6+

To change the disabled property you should use the .prop() function.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 and below

The .prop() function doesn't exist, but .attr() does similar:

Set the disabled attribute.

$("input").attr('disabled','disabled');

To enable again, the proper method is to use .removeAttr()

$("input").removeAttr('disabled');

In any version of jQuery

You can always rely on the actual DOM object and is probably a little faster than the other two options if you are only dealing with one element:

// assuming an event handler thus 'this'
this.disabled = true;

The advantage to using the .prop() or .attr() methods is that you can set the property for a bunch of selected items.

---

Note: In 1.6 there is a .removeProp() method that sounds a lot like removeAttr(), but it SHOULD NOT BE USED on native properties like 'disabled' Excerpt from the documentation:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

In fact, I doubt there are many legitimate uses for this method, boolean props are done in such a way that you should set them to false instead of "removing" them like their "attribute" counterparts in 1.5

Solution 2

Just for the sake of new conventions && making it adaptable going forward (unless things change drastically with ECMA6(????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

and

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

Solution 3

    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Sometimes you need to disable/enable the form element like input or textarea. Jquery helps you to easily make this with setting disabled attribute to "disabled". For e.g.:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

To enable disabled element you need to remove "disabled" attribute from this element or empty it's string. For e.g:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

refer :http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

Solution 4

$("input")[0].disabled = true;

or

$("input")[0].disabled = false;

Solution 5

There are many ways using them you can enable/disable any element :

Approach 1

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

Approach 2

$("#txtName").attr("disabled", "disabled");

If you are using jQuery 1.7 or higher version then use prop(), instead of attr().

$("#txtName").prop("disabled", "disabled");

If you wish to enable any element then you just have to do opposite of what you did to make it disable. However jQuery provides another way to remove any attribute.

Approach 1

$("#txtName").attr("disabled", false);

Approach 2

$("#txtName").attr("disabled", "");

Approach 3

$("#txtName").removeAttr("disabled");

Again, if you are using jQuery 1.7 or higher version then use prop(), instead of attr(). That's is. This is how you enable or disable any element using jQuery.

View more solutions

Comments

[user2381114]

possible duplicate of Remove disabled attribute using JQuery?

[Onshop]

I found the DependsOn plugin which you might find useful

[Cornel Masson]

As an aside, remember that, if you want to disable ALL form input controls - incl. checkboxes, radios, textareas, etc. - you have to select ':input', not just 'input'. The latter selects only actual <input> elements.

[gnarf]

@CornelMasson input,textarea,select,button is a little better to use than :input -- :input as a selector is quite inefficient because it has to select * then loop over each element and filter by tagname - if you pass the 4 tagname selectors directly it is MUCH faster. Also, :input is not a standard CSS selector, so any performance gains that are possible from querySelectorAll are lost

[OneChillDude]

Does this just prevent the user from accessing it, or does it actually remove it from the web request?

[Peter V. Mørch]

Jikes! Why $(document).on('event_name', '#your_id', function() {...}) instead of $('#your_id').on('event_name', function() {...}). As described in the jQuery .on() documentation the former uses delegation and listens to all event_name events that bubble up to document and checks them for a matching #your_id. The latter listens specifically to $('#your_id') events only and that scales better.

[nullability]

@bwheeler96 It does both. A disabled input element will not be submitted, and the user will be unable to change its value.

[crazymykl]

The former works for elements inserted into the DOM at any point, the latter only for those extant at that moment.

[dbrin]

Also remember to use true/false booleans and not strings to enable/disable properties

[Sandeepan Nath]

Using the .removeProp("disabled") was causing the issue of "property getting removed completely and not getting added again" as pointed out by @ThomasDavidBaker, in case of some browsers like Chrome, whereas it was working fine on some like Firefox. We should really be careful here. Always use .prop("disabled",false) instead

[Jeff Lowery]

Neither .prop or .attr are sufficient for disabling anchor elements; .prop won't even grey out the 'control' (.attr does, but the href is still active). You have to also add a click event handler that calls preventDefault().

[basic6]

Of course the question asked for jQuery and this is changing the state in plain JavaScript, but it works.

[Ola Tuvesson]

Since IE8 and below don't support the :disabled pseudo-class, you have to use the [disabled=disabled] selector to style disabled objects - which means you should follow geekbuntu's answer below if you care about cross-browser support. Basically, despite the large number of upvotes, this answer is incorrect and attr / removeAttr is the way to go.

[Gone Coding]

While wrapping the functionality is handy, you should have used prop and not attr with the disabled property for it to work correctly (assuming jQuery 1.6 or above).

[Nicu Surdu]

@TrueBlueAussie What is the downside of using attr ? I use the above code in some projects and as far as I remember it works ok

[Gone Coding]

The obvious exceptions are controls with properties behind the scenes. The most famous one is the checked property of checkboxes. Using attr will not give the same result.

[SepehrM]

@crazymykl Correct but you shouldn't add elements with an id already present on your page.

[wings]

@JeffLowery You are right. I have to use them both to disable an anchor element.

[RBT]

From review queue: May I request you to please add some more context around your answer. Code-only answers are difficult to understand. It will help the asker and future readers both if you can add more information in your post.

[ADyson]

the question specifically asks about jQuery...but equally your statement is correct, and worth knowing that jQuery doesn't need to be used for this when there are multiple elements anymore.

[Henrik Erlandsson]

var o=$("#elem");o.disabled=true; does not work here. It would be nice if it did, any thoughts?

[cjsimon]

This changes the state in JavaScript, but it still uses a jQuery selector to get the first input.

[Sajjad Shirazy]

But i don't think we are making encyclopedia of jquery here, if an answer works, it's good

[quemeful]

the funniest part of this answer is the use of single quotes and double quotes in the same line of JavaScript

[Mike]

This ties in with slightly with the issue of toggling an input being enabled or disabled. If you use this in the inputs own .click event it will work to disable, but then the input element itself becomes unclickable after its disabled. Consider using this on a container for the input such as a div, span, or even an li if in a list style form.

[Harry Bosh]

Thanks this helped me isolate to an input name. $("input[name=method]").prop('disabled', true);

[Floww]

thanks i have a same thing for the toggle it is; $("input").prop('disabled', function(i, v) { return !v; });

[Jerry King]

what should be done for dynamically adding elements.?!