Categories
disabled-input html-input javascript jquery

Disable/enable an input with jQuery?

2478

$input.disabled = true;

or

$input.disabled = "disabled";

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

2

4047

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

13

  • 10

    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.

    Aug 16, 2012 at 8:10

  • 37

    @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

    – gnarf

    Sep 16, 2012 at 7:01

  • 3

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

    May 2, 2013 at 15:45

  • 4

    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

    Jun 25, 2014 at 8:08

  • 6

    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().

    Sep 25, 2014 at 18:50

67

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');   
});

3

  • 13

    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.

    Jul 31, 2013 at 20:09


  • 27

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

    – crazymykl

    Oct 10, 2013 at 16:56

  • 1

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

    – SepehrM

    Apr 7, 2016 at 13:46

42

    // 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