How to disable HTML button using JavaScript

Question

I   ve read that you can disable  make physically unclickable  an HTML button simply by appending disable to its tag  but not as an attribute  as follows    lt input type  button  name myButton value  disable  disabled gt    Since this setting is not an attribute  how can I add this in dynamically via JavaScript to disable a button that was previously enabled

User · Answer

If you have the button object  called b  b disabled false

User · Answer

Since this setting is not an attribute   It is an attribute   Some attributes are defined as boolean  which means you can specify their value and leave everything else out  i e  Instead of disabled  disabled   you include only the bold part  In HTML 4  you should include only the bold part as the full version is marked as a feature with limited support  although that is less true now then when the spec was written    As of HTML 5  the rules have changed and now you include only the name and not the value  This makes no practical difference because the name and the value are the same   The DOM property is also called disabled and is a boolean that takes true or false   foo disabled   true    In theory you can also foo setAttribute  disabled    disabled    and foo removeAttribute  disabled    but I wouldn t trust this with older versions of Internet Explorer  which are notoriously buggy when it comes to setAttribute

User · Answer

The official way to set the disabled attribute on an HTMLInputElement is this   var input   document querySelector   name  myButton         Without querySelector API    var input   document getElementsByName  myButton   item 0       disable input setAttribute  disabled   true      enable input removeAttribute  disabled      While  kaushar s answer is sufficient for enabling and disabling an HTMLInputElement  and is probably preferable for cross-browser compatibility due to IE s historically buggy setAttribute  it only works because Element properties shadow Element attributes  If a property is set  then the DOM uses the value of the property by default rather than the value of the equivalent attribute   There is a very important difference between properties and attributes  An example of a true HTMLInputElement property is input value  and below demonstrates how shadowing works    x000D   x000D  var input   document querySelector   test    x000D   x000D     the attribute works as expected x000D  console log  old attribute    input getAttribute  value     x000D     the property is equal to the attribute when the property is not explicitly set x000D  console log  old property    input value   x000D   x000D     change the input s value property x000D  input value    My New Value   x000D   x000D     the attribute remains there because it still exists in the DOM markup x000D  console log  new attribute    input getAttribute  value     x000D     but the property is equal to the set value due to the shadowing effect x000D  console log  new property    input value   x000D   lt input id  test  type  text  value  Hello World    gt  x000D   x000D   x000D    That is what it means to say that properties shadow attributes  This concept also applies to inherited properties on the prototype chain    x000D   x000D  function Parent     x000D    this property    ParentInstance   x000D    x000D   x000D  Parent prototype property    ParentPrototype   x000D   x000D     ES5 inheritance x000D  Child prototype   Object create Parent prototype   x000D  Child prototype constructor   Child  x000D   x000D  function Child     x000D       ES5 super   x000D    Parent call this   x000D   x000D    this property    ChildInstance   x000D    x000D   x000D  Child prototype property    ChildPrototype   x000D   x000D  logChain  new Parent      x000D   x000D  log  -------------------------------    x000D  logChain  Object create Parent prototype     x000D   x000D  log  -----------    x000D  logChain  new Child      x000D   x000D  log  ------------------------------    x000D  logChain  Object create Child prototype     x000D   x000D     below is for demonstration purposes x000D     don t ever actually use document write    eval    or access   proto   x000D  function log value    x000D    document write   lt pre gt   value  lt  pre gt     x000D    x000D   x000D  function logChain code    x000D    log code   x000D   x000D    var object   eval code   x000D   x000D    do   x000D      log    object constructor name    object instanceof object constructor    instance     prototype   property    JSON stringify object property      x000D       x000D      object   object   proto    x000D      while  object     null   x000D    x000D   x000D   x000D    I hope this clarifies any confusion about the difference between properties and attributes

User · Answer

It is an attribute  but a boolean one  so it doesn t need a name  just a value -- I know  it s weird    You can set the property equivalent in Javascript   document getElementsByName  myButton   0  disabled   true

User · Answer

It s still an attribute  Setting it to    lt input type  button  name myButton value  disable  disabled  disabled  gt        is valid

User · Answer

lt button disabled true gt text here lt  button gt    You can still use an attribute  Just use the  disabled  attribute instead of  value

User · Answer

I think the best way could be       ctl00 ContentPlaceHolder1 btnPlaceOrder   attr  disabled   true     It works fine cross-browser

User · Answer

Try the following   document getElementById  id   setAttribute  disabled    disabled

User · Answer

to disable  document getElementById  btnPlaceOrder   disabled   true     to enable  document getElementById  btnPlaceOrder   disabled   false

[javascript] How to disable HTML button using JavaScript?

Examples related to javascript

Examples related to html