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?

Antioch

possible duplicate of Remove disabled attribute using JQuery? – Over

I found the DependsOn plugin which you might find useful – Remedial

Answer 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

Bushire

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. – Mossbunker

@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 – Bushire

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

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

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

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 – Buffet

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

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. – Injustice

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

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

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

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. – Norry

what should be done for dynamically adding elements.?! – Balladist

Not working for me > this.disabled = true – Gershwin

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

Filipino

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. – Deirdre

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

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

Answer 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', '');

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

Adsorb

Answer 4

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

or

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

Cumberland

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

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

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

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

Tapp

Answer 6

Use like this,

 $( "#id" ).prop( "disabled", true );

 $( "#id" ).prop( "disabled", false );

Integration

Answer 7

If you just want to invert the current state (like a toggle button behaviour):

$("input").prop('disabled', ! $("input").prop('disabled') );

As noted in comments, the following will also toggle the prop:

$("input").prop('disabled', function(i, v) { return !v; });

Tumer

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

Answer 8

You can put this somewhere global in your code:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

And then you can write stuff like:

$(".myInputs").enable();
$("#otherInput").disable();

Adamina

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). – Fistulous

@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 – Adamina

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. – Fistulous

Answer 9

Update for 2018:

Now there's no need for jQuery and it's been a while since document.querySelector or document.querySelectorAll (for multiple elements) do almost exactly same job as $, plus more explicit ones getElementById, getElementsByClassName, getElementsByTagName

Disabling one field of "input-checkbox" class

document.querySelector('.input-checkbox').disabled = true;

or multiple elements

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

Thirsty

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. – Feigin

Answer 10

this works for me

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

Downey

Answer 11

You can use the jQuery prop() method to disable or enable form element or control dynamically using jQuery. The prop() method require jQuery 1.6 and above.

Example:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

Joshia

Answer 12

Disable true for input type :

In case of a specific input type (Ex. Text type input)

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

For all type of input type

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

Romance

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

Answer 13

Disable:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Enable:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

Chrome

Answer 14

An alternate way to disable the input field is by using jQuery and css like this:

jQuery("#inputFieldId").css({"pointer-events":"none"})

and to enable the same input the code is as follows:

jQuery("#inputFieldId").css({"pointer-events":""})

Whinchat

Answer 15

<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

Glop

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. – Leningrad

Answer 16

I used @gnarf answer and added it as function

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Then use like this

$('#myElement').disable(true);

Unicuspid

Answer 17

2018, without JQuery (ES6)

Disable all input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Disable input with id="my-input"

document.getElementById('my-input').disabled = true;

The question is with JQuery, it's just FYI.

Irresolvable

Answer 18

Approach 4 (this is extension of wild coder answer)

txtName.disabled=1     // 0 for enable

<input id="txtName">

Momus

Answer 19

In jQuery Mobile:

For disable

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

For enable

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');

Clayton