Add disabled attribute to input element using Javascript

Question

I have an input box and I want it to be disabled and at the same time hide it to avoid problems when porting my form.

So far I have the following code to hide my input:

$(".shownextrow").click(function() { 
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

This is the input that gets hidden as a result:

<input class="longboxsmall" type="text" />

How can I also add the disabled attribute to the input?

score 374 · Answer 1 · edited Jun 20 '20 at 09:12

$("input").attr("disabled", true); as of... I don't know any more.

It's December 2013 and I really have no idea what to tell you.

First it was always .attr(), then it was always .prop(), so I came back here updated the answer and made it more accurate.

Then a year later jQuery changed their minds again and I don't even want to keep track of this.

Long story short, as of right now, this is the best answer: "you can use both... but it depends."

You should read this answer instead: https://stackoverflow.com/a/5876747/257493

And their release notes for that change are included here:

Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr("value", "somevalue") will continue to work, as it did before 1.6).

Summary of Preferred Usage

The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.

Or in other words:

".prop = non-document stuff"

".attr" = document stuff

... ...

May we all learn a lesson here about API stability...

+1 for making the update text large enough for me to pay attention — Vael Victus, Dec 06 '13 at 18:13
@VaelVictus Not so fast. I'm sorry to say they've changed it again a year after I posted this... and I forgot about this answer. Read this answer: http://stackoverflow.com/a/5876747/257493 — Incognito, Dec 06 '13 at 18:24
That document/non-document differentiation between .prop and .attr are infinitely helpful and I've never seen the context framed in such a succinct manner before. Much appreciated! — unrivaledcreations, Jan 14 '16 at 16:35

score 75 · Answer 2 · answered Mar 20 '14 at 04:38

75

Working code from my sources:

HTML WORLD

<select name="select_from" disabled>...</select>

JS WORLD

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");

answered Mar 20 '14 at 04:38

Mircea Stanciu

3,675
3
34
37

5

As a note for people coming here from Google, directly from [jQuery](http://api.jquery.com/attr/#attr1): `As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method` – Erenor Paz Aug 10 '16 at 09:12

score 24 · Answer 3 · edited Dec 06 '13 at 19:49

24

If you're using jQuery then there are a few different ways to set the disabled attribute.

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);

edited Dec 06 '13 at 19:49

answered Dec 06 '13 at 18:38

iConnor

19,997
14
62
97

What about `$element.eq(0)[0].disabled = true;`? :-P – qwertynl Dec 06 '13 at 18:39
2

Yeah, that's to advanced for me, I don't go that far to improve performance. – iConnor Dec 06 '13 at 18:40
+1. Although it is a bit redundant. If you're going to be dealing with a NodeList/array of elements it's silly to select them by the index like that. Iteration or simply selecting only the element you need makes more sense. – Dec 06 '13 at 19:02

score 22 · Answer 4 · 2013-12-06T18:37:05.773

22

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

All of the above are perfectly valid solutions. Choose the one that fits your needs best.

edited Dec 06 '13 at 18:37

answered Dec 06 '13 at 18:30

2

Thank you for providing a solution that doesn't require jQuery. – Elias Zamaria Jun 08 '18 at 15:06

score 14 · Answer 5 · answered Jul 17 '20 at 20:12

Since the question was asking how to do this with JS I'm providing a vanilla JS implementation.

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
  element.disabled = "disabled";
}

score 13 · Answer 6 · answered Sep 27 '10 at 18:33

You can get the DOM element, and set the disabled property directly.

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
});

or if there's more than one, you can use each() to set all of them:

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});

score 6 · Answer 7 · answered Sep 27 '10 at 18:33

6

Just use jQuery's attr() method

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

answered Sep 27 '10 at 18:33

Gabe

49,577
28
142
181

5

and remove disabled state using `.removeAttr('disabled');` – ruhong Dec 29 '13 at 21:16

score 5 · Answer 8 · edited Apr 22 '21 at 15:53

5

in JQuery you can use the following functions:

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

For native js you can use:

document.getElementById("myElement").disabled = true;

edited Apr 22 '21 at 15:53

Moaid ALRazhy

1,604
1
3
13

answered Apr 22 '21 at 10:58

AristideWenceslas

51
1
2

1

hi, welcome to StackOverflow! umm, could you use code block on it? it will make others easy to read. just put ``` before and after your code. – nouvist Apr 22 '21 at 11:25

Add disabled attribute to input element using Javascript

8 Answers8

Linked