What Is the Correct Value For the Disabled Attribute

What is the correct value for the disabled attribute?

• For XHTML, <input type="text" disabled="disabled" /> is the valid markup.
• For HTML5, <input type="text" disabled /> is valid and used by W3C on their samples.
• In fact, both ways works on all major browsers.

How do I get the value of the disabled attribute with vanilla js?

When I tried searching for this specific wording I found a lot of related questions on stackoverflow, but not this one. I figured it out from other posts and what I already know, but since I did not find this specific question clearly asked in stackoverflow, I hope this helps someone less experienced find the answer.

You should be looking for the value of the disabled property of the HTML element instead of the attribute.

disabled is both an attribute and a property, but only the property is really useful. You get it in your js like this:

let myElement = document.document.getElementsByTagName('input')[0];
let is_disabled = myElement.disabled;
// true or false

The MDN page on disabled is no help. It only talks about disabled as an attribute. Maybe there is another page in the MDN that I have not found yet that explains it better.

An attribute has to do with HTML. In the code below, class is an attribute:

<input class="the-best"/>

It has a value right there in the HTML. You get the value of an attribute with .getAttribute():

let classNames = myElement.getAttribute('class');
// "the-best"

A property has to do with javascript. In javascript, when you get an element you get an object with a bunch of properties and methods. For example, you can get the inner height of the element like this:

let inner_height = myElement.clientHeight;
// Some number

In HTML, disabled looks like this:

<input disabled/>

You can see disabled in the HTML, but it does not have a value. You can give it a value, like myElement.setAttribute('disabled', 'false'). You'll get <input disabled="false"> and the element will be disabled. If disabled is in the HTML the element is disabled. If it is not in the HTML then the element is NOT disabled. .getAttribute() will work like this:

// <input disabled/>
let is_disabled = myElement.getAttribute('disabled');
// "" - an empty string

// <input/>
let is_disabled = myElement.getAttribute('disabled');
// null

You can probably still use .getAttribute() if you want since you can check for a string or null, but people sometimes do weird things with their HTML and the "values" of these kinds of attributes (like what I described above).

Why do we need disabled=disabled?

The officially correct xhtml syntax is disabled="disabled".

The reason for this is that xhtml is an XML syntax, and XML requires that attributes have values. The xhtml specs also explicitly specify that the value should be "disabled".

The reason for the choice of this value over any other possible value was fairly arbitrary; they simply decided that all previously boolean attributes should be converted to XML format by making their value the same as their name.

So yes, there is an official spec which says you must use that full syntax. But it only applies to xhtml documents. You can find it here (if you search for disabled in that page, you will find that it is listed as only allowing "disabled" as the value. Similarly for the readonly and checked attributes).

Plain HTML - both v4 and v5 - isn't tied to XML's restrictions in this way, and doesn't require an attribute value for disabled; the mere existence of the disabled attribute is sufficient to disable the field, regardless of whether you have a value for the attribute, or what that value is.

The final upshot of all this is that if you are using an XHTML doctype, or you wish to remain XML-compliant, you should use disabled="disabled". If you're not using XHTML and you don't care about having valid XML syntax, then you can just use disabled on its own, or with any attribute value you like.

One other thing I would note (getting slightly off topic, but may be relevant) is that this may have an impact on any CSS or JQuery code that may reference the field. For example, I've seen people using JQuery selectors such as $('[disabled=disabled]'), and similar in CSS. This obviously relies on the attribute having the expected value. Therefore, if you're going to reference a boolean attribute like this in a selector, you should reference it without a value, like so: $('[disabled]') as this will work whatever the attribute is set to.

Warning '@(!isEditing || ...)' is not a valid value of attribute 'disabled'?

It's a bug.

HTML warning when setting disabled attribute using Razor syntax #16833
https://github.com/aspnet/AspNetCore/issues/16833

Update:

All the warnings are disappeared after my Visual Studio is upgraded to V16.4.2.

Does the value of disabled matter in HTML?

The only value disabled is allowed to have is disabled. You can omit everything except the value (disabled) in HTML 4 and earlier. You can omit everything except the name (also disabled) in HTML 5.

From the spec:

A number of attributes are boolean attributes. The presence of a
boolean attribute on an element represents the true value, and the
absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string
or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes.
To represent a false value, the attribute has to be omitted
altogether.

This is fine:

disabled

This is fine:

disabled="disabled"

This is fine:

disabled=disabled

This is not HTML:

disabled="true" 

This is not HTML:

disabled="You know it"

You can expect most browsers to perform error recovery on invalid values, but that is no reason not to simply write real HTML in the first place.

Reactive forms - Warning when using the disabled attribute

Angular is telling you that you are mixing two different types of approaches to forms. One is template-driven, while the other is reactive forms. As you are using reactive forms angular warning you that you should use the reactive approach to disable your form control instead of using the HTML attribute [disabled]

In your use case you can just enable or disable the field depending upon it's length in the subscribe block which should look like this:

this.createForm.controls.formTypeId.valueChanges.subscribe((value: number) => {
  this.formsService.getFormNames(value).subscribe((formNames) => {
    if(formNames.length > 0){
        this.createForm.controls.formControlName.enable();
    } else {
        this.createForm.controls.formControlName.disable()
    }
    this.formNames = formNames;
  });
});

Read this for better insight: https://indepth.dev/posts/1474/disable-form-controls-using-forms-api-or-html-attributes

Also, you are using nested subscribes. i.e. one subscribe in another subscribe, which is a bad practice and should be avoided. I advise you to look into RxJs maps such as switchMap, mergeMap etc whichever fulfills your use-case. For example, if you want to cancel the previous subscription when a new event comes you can use switchMap:

this.createForm.controls.formTypeId.valueChanges
      .pipe(
          switchMap((value: number) => {
              return this.formsService.getFormNames(value);
          })
      )
      .subscribe(formNames => {
          if (formNames.length > 0) {
              this.createForm.controls.formControlName.enable();
          } else {
              this.createForm.controls.formControlName.disable();
          }
          this.formNames = formNames;
      });

What's the correct way to disable a button with html?

The second two (disabled=disabled and disabled) are both correct. You can choose which one to use based on personal preference. The disabled attribute is a Boolean attribute, which can not contain the value true (although it will still work).

Why is the true boolean value the wrong attribute value?

According to the HTML5 spec:

A number of attributes in HTML5 are boolean attributes. The presence
of a boolean attribute on an element represents the true value, and
the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string
or a value that is a case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.

So with a boolean attribute like disabled, it's presence alone is enough and it needs no value, although virtually every web browser will still accept it. Therefore, you should use either disabled (alone) or disabled="disabled"

---

Related Topics