启用/禁用纯JavaScript中的按钮 [英] Enable/disable a button in pure javascript

问题描述

我想在没有jquery的情况下启用/禁用按钮.这是我的代码:

btn.setAttribute("disabled", true);

工作.但这不是-按钮保持禁用状态:

btn.setAttribute("disabled", false);

解决方案

 <input type="button" value="I'm disabled" disabled="true">
<input type="button" value="I'm disabled" disabled="false">
<input type="button" value="I'm disabled" disabled="doesn't matter">
<input type="button" value="I'm disabled" disabled=""> 

在HTML中，您甚至不需要为属性设置一个值:

 <input type="button" value="I'm disabled" disabled> 

但是，建议使用布尔属性的约定(如果确实要为属性提供值)，以使我们在开发人员之间具有一定的一致性，那就是将其值设置为等于属性名称本身.因此，要按照建议的惯例通过在JavaScript中使用元素的属性来禁用它:

element.setAttribute("disabled", "disabled");

因此，要启用一个元素，您无需将disabled属性设置为任何值，因为如我们所见，这只会禁用它，因此您需要完全删除disabled属性:

element.removeAttribute("disabled");

 document.querySelector("input[type='button']").removeAttribute("disabled"); 

 <input type="button" value="I'm NOT disabled" disabled="disabled"> 

---

现在，在JavaScript中使用DOM对象时，有两种方法可以影响 元素的当前状态 ，了解使用这些元素的效果非常重要两种技术:

1. 使用元素的当前HTML状态(通过 setAttribute()，removeAttribute()和getAttribute()).
2. 使用元素在内存中的元素的 当前DOM对象状态 (通过代表当前状态的JavaScript属性完成).

最重要的是， property 值可能与 attribute 值不同.这可能会造成混淆，但是HTML状态是元素从外观上看，属性状态实际上是在内部发生的事情，例如您可以戴上一张快乐的脸，以便看着您的人认为您很高兴(HTML状态)，但实际上您可能会为之感到难过(财产状态).

当未设置属性状态时，属性状态就很重要，并且将完全控制元素的状态.设置属性状态后，它将覆盖属性状态可能存在的任何内容，并控制元素的实际状态.

 // Get a reference to the button
var btn = document.querySelector("[type=button]");

// Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));

// Test what the current mapped property state is:
console.log(btn.disabled);

// Change the property state, which will override the HTML state and 
// and cause it to become enabled.
btn.disabled = false;

// Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));  // null because property overrode HTML

// Test what the current mapped property value is:
console.log(btn.disabled); 

 <input type="button" value="I'm disabled" disabled="disabled"> 

来自 MDN :

要启用该元素，请将此属性完全排除在外 将该值设置为false.

I want to enable/disable a button without jquery. Here's my code:

btn.setAttribute("disabled", true);

Works. But this doesn't -- a button remains disabled:

btn.setAttribute("disabled", false);

解决方案

disabled is a Boolean attribute, the mere presence of it causes the element to be disabled regardless of what the value of that attribute actually is. This is why you are able to disable the element in JavaScript by setting the attribute to true, you could have set it to anything (and that is the reason why when you set it to false it remains disabled).

<input type="button" value="I'm disabled" disabled="true">
<input type="button" value="I'm disabled" disabled="false">
<input type="button" value="I'm disabled" disabled="doesn't matter">
<input type="button" value="I'm disabled" disabled="">

In the HTML, you don't even need to set a value at a for the attribute at all:

<input type="button" value="I'm disabled" disabled>

However the recommended convention with Boolean attributes (if you do want to provide a value for the attribute), so that we can have some consistency among developers, is to set their value equal to the attribute name itself. So, to disable an element, by working with its attribute, in JavaScript, following recommended conventions:

element.setAttribute("disabled", "disabled");

Therefore, to enable an element, you don't set the disabled attribute to any value, because as we've seen, that will just disabled it, you need to remove the disabled attribute completely:

element.removeAttribute("disabled");

document.querySelector("input[type='button']").removeAttribute("disabled");

<input type="button" value="I'm NOT disabled" disabled="disabled">

---

Now, when working with DOM objects in JavaScript, there are two ways to affect the current state of an element and it's important to understand the effects of working with these two techniques:

1. Work with the element's current HTML state (which is done with setAttribute(), removeAttribute(), and getAttribute()).
2. Work with element's current DOM Object state (which is done with the JavaScript property that represents the current state) of the element in memory.

Most importantly, the property value can be different than the attribute value. This can be confusing but the HTML state is what the element looks like from the outside and the property state is what is really happening on the inside, like you can put a happy face on so that people who look at you think your happy (the HTML state), but you might actually be sad for real (the property state).

When the property state hasn't been set, the attribute state is all that matters and will have total control over the state of the element. When the property state is set, it overrides whatever the attribute state may be and controls the actual state of the element.

// Get a reference to the button
var btn = document.querySelector("[type=button]");

// Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));

// Test what the current mapped property state is:
console.log(btn.disabled);

// Change the property state, which will override the HTML state and 
// and cause it to become enabled.
btn.disabled = false;

// Test what the current HTML state is:
console.log(btn.getAttribute("disabled"));  // null because property overrode HTML

// Test what the current mapped property value is:
console.log(btn.disabled);

<input type="button" value="I'm disabled" disabled="disabled">

From MDN:

To enable the element, leave this attribute out entirely as opposed to setting the value to false.

这篇关于启用/禁用纯JavaScript中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！