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    lt input class  longboxsmall  type  text    gt    How can I also add the disabled attribute to the input

User · Answer

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

_x000D_

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

_x000D_

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Just use jQuery s attr   method    this  closest  tr   next   show   find   longboxsmall   attr  disabled    disabled

User · Answer

quot input quot   attr  quot disabled quot   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   quot you can use both    but it depends  quot  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  quot value quot    quot somevalue quot   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    quot  prop   non-document stuff quot   quot  attr quot    document stuff          May we all learn a lesson here about API stability

User · Answer

Working code from my sources   HTML WORLD   lt select name  select from  disabled gt     lt  select gt      JS WORLD  var from   jQuery  select name select from        add disabled from attr  disabled    disabled         remove it from removeAttr  disabled

[javascript] Add disabled attribute to input element using Javascript

Examples related to javascript

Examples related to jquery

Examples related to input

Examples related to onclick