DOM 'disabled' property in javascript

前端未结

关注

 5  1608

半阙折子戏

I can\'t find a definitive answer to how to use the disabled property to disable form elements in javascript.

Some places say it\'s a simple boolean. Other\'s say to

相关标签:

5条回答

忘掉有多难

2020-12-21 03:18

The existence of the property is enough to trigger the disabled state.

If you must set a value for the property then it should be the same as the property name e.g disabled="disabled".

I'll try to find some documentation on the specific behaviours of browsers and the relevant specs.

--edit--

The HTML5 spec covers boolean attributes, such as disabled, here: http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes

In practice, web browsers will ignore the assigned value and simply look for the presence of the attribute.

0 讨论(0)
发布评论:

提交评论
- 加载中...
暗喜

2020-12-21 03:19

The disabled attribute is a boolean. If the tag is present the input will be disabled. The confusion around having a string value associated with it usually comes from XHTML validation. In XHTML attribute minimization is forbidden, so it must have a value, and XHTML specification states it must be disabled="disabled".

For any browser, if the tag is present, the input will be disabled, regardless of the string value.

JsFiddle Demo

w3c disabled attribute spec

0 讨论(0)
发布评论:

提交评论
- 加载中...
忘了有多久

2020-12-21 03:22
The following input elements are all disabled:
```
<input disabled />
<input disabled="" />
<input disabled="disabled" />
<input disabled="true" />
<input disabled="false" /> 
```
If a boolean attribute is present, it's on; otherwise, it's off. The value doesn't mean anything.

However, when dealing with these elements through javascript, you should make use of the corresponding property, i.e.:
```
myInput.disabled = true; // adds the attribute and disables control
myInput.disabled = false; // removes the attribute and enables control
```
The property will update the attribute for you. This is true of all boolean attribute / property pairs, i.e.: readonly, checked, selected, etc.

Confusion may stem from the fact that setAttribute() asks for both a name and value and emits markup in a key="value" format -even when you don't want a value. When adding a custom boolean attribute, I simply set the attribute without a value (sample):
```
input.setAttributeNode(document.createAttribute("data-custom"));
console.log(input); // <input data-custom>
```
_{See document.createAttribute() and Element.setAttributeNode().}
0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2020-12-21 03:28

The .disabled property of DOM elements is a boolean value and should get booleans assigned.

The disabled HTML attribute, like in markup or setAttribute(), is a "boolean html attribute" which means it can take the values empty, disabled or be omitted. See also HTML - Why boolean attributes do not have boolean value? and Correct value for disabled attribute.

0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2020-12-21 03:28

Setting disabled to true works on all input types. I've tried it in chrome,firefox,ie edge. Try this;

<!doctype html>
<html lang="en">
<body>
<input type="text" class="disableit">
<textarea class="disableit"></textarea>
<input type="radio" class="disableit">
<select class="disableit"><option>one</option><option>two</option>
<input type="checkbox" class="disableit">

<script>
var inputs = document.getElementsByClassName( "disableit" );
for( var i = 0; i < inputs.length; i++ ){
    inputs[i].disabled = true;
}
</script>
</body>
</html>

0 讨论(0)