CODEWITHSUNDEEP
javascriptjqueryinputonclick
user342391
user342391

Reputation: 7827

Add disabled attribute to input element using JavaScript

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?

Upvotes: 187

Views: 574366

Answers (9)

RedDragonWebDesign
RedDragonWebDesign

Reputation: 2571

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

I tried .prop(), but that did NOT work for me on JQuery 3.7.1

Upvotes: 3

AristideWenceslas
AristideWenceslas

Reputation: 51

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;

Upvotes: 5

Viktor
Viktor

Reputation: 161

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";
}

Upvotes: 15

Incognito
Incognito

Reputation: 20765

$("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...

Upvotes: 384

Mircea Stanciu
Mircea Stanciu

Reputation: 3753

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

Upvotes: 80

iConnor
iConnor

Reputation: 20189

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

Upvotes: 24

user1596138
user1596138

Reputation: 

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

Upvotes: 22

user113716
user113716

Reputation: 322492

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

Upvotes: 13

Gabe
Gabe

Reputation: 50493

Just use jQuery's attr() method

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

Upvotes: 6

Related Questions