By omg


2009-09-12 05:21:54 8 Comments

$input.disabled = true;

or

$input.disabled = "disabled";

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

17 comments

@learnkevin 2019-02-22 13:50:58

this works for me

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

@wild coder 2018-08-02 10:59:38

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.

@Abdus Salam Azad 2018-10-31 08:38:36

Use like this,

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

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

@Hasib Kamal 2017-12-19 16:33:08

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

@Harry Bosh 2019-04-24 09:30:05

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

@Tomer Ben David 2018-09-21 07:04:29

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.

@SPARTAN 2018-08-02 10:26:25

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>

@rap-2-h 2018-06-04 13:43:36

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.

@Pawel 2018-02-11 18:29:49

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

@ADyson 2018-03-01 21:33:34

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.

@Atif Hussain 2016-06-14 11:12:21

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

@Imants Volkovs 2017-11-16 10:24:59

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

@user3831708 2015-09-26 10:22:38

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

@RBT 2017-05-11 01:41:56

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.

@Nicu Surdu 2014-10-18 13:42:39

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

@Gone Coding 2015-05-20 12:54:37

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 2015-05-20 14:56:01

@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 2015-05-20 14:58:30

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.

@daVe 2014-09-12 16:28:25

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

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

@Sajjad Shirazy 2014-09-06 14:53:40

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

or

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

@basic6 2014-10-21 15:16:17

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

@cjsimon 2018-05-01 21:41:07

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

@Sajjad Shirazy 2018-05-02 06:48:23

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

@Aris 2019-05-15 08:29:54

it's not a good practice to mix plain javascript with jquery

@gnarf 2009-09-12 05:23:34

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

@Cornel Masson 2012-08-16 08:10:20

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 2012-09-16 07:01:05

@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 2013-05-02 15:45:54

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

@nullability 2013-08-20 15:07:00

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

@dbrin 2014-05-08 23:57:41

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

@Sandeepan Nath 2014-06-25 08:08:17

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 2014-09-25 18:50:40

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

@Ola Tuvesson 2014-11-23 14:17:27

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.

@wings 2016-11-17 02:35:01

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

@Henrik Erlandsson 2018-04-06 11:49:55

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

@quemeful 2018-09-26 20:28:09

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

@Mike 2019-01-27 19:19:07

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.

@Harini Sekar 2014-04-07 10:27:16

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

@geekbuntu 2012-07-18 11:51:54

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

@Peter V. Mørch 2013-07-31 20:09:16

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.

@crazymykl 2013-10-10 16:56:03

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

@SepehrM 2016-04-07 13:46:47

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

Related Questions

Sponsored Content

34 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

40 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 708026 View
  • 2552 Score
  • 40 Answer
  • Tags:   javascript jquery

35 Answered Questions

[SOLVED] Add table row in jQuery

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

73 Answered Questions

[SOLVED] How can I get query string values in JavaScript?

60 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

73 Answered Questions

[SOLVED] How can I convert a string to boolean in JavaScript?

  • 2008-11-05 00:13:08
  • Kevin
  • 1615407 View
  • 2145 Score
  • 73 Answer
  • Tags:   javascript

28 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2212721 View
  • 2078 Score
  • 28 Answer
  • Tags:   javascript jquery

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

Sponsored Content