如何使用 JavaScript 禁用 HTML 按钮?

IT技术 javascript html
2021-01-13 10:12:02

我已经读到您可以简单地通过附加disable到其标签来禁用(使物理无法点击)HTML 按钮,但不能作为属性,如下所示:

<input type="button" name=myButton value="disable" disabled>

由于此设置不是属性,如何通过 JavaScript 动态添加它以禁用以前启用的按钮?

6个回答

由于此设置不是属性

它是一个属性。

某些属性被定义为布尔值,这意味着您可以指定它们的值,而将其他所有内容排除在外。ie 而不是 disabled=" disabled ",你只包括粗体部分。在 HTML 4 中,您应该只包含粗体部分,因为完整版本被标记为支持有限的功能(尽管现在编写规范时不太正确)。

从 HTML 5 开始,规则发生了变化,现在您只包含名称而不包含值。这没有实际区别,因为名称和值是相同的。

DOM属性也被称为disabled并且是采用布尔truefalse

foo.disabled = true;

从理论上讲,您也可以foo.setAttribute('disabled', 'disabled');foo.removeAttribute("disabled"),但我不相信旧版本的 Internet Explorer(当涉及到 时,它们是出了名的错误setAttribute)。

两者都做,更改属性并设置属性是否有意义,还是只是矫枉过正?
2021-03-19 10:12:02
什么是foofoo.disabled = true;是那个按钮的id吗?
2021-03-29 10:12:02
@stack — 一个变量,包含对通过您喜欢的任何方式收集的元素的引用(例如 querySelector)
2021-04-06 10:12:02

禁用

document.getElementById("btnPlaceOrder").disabled = true; 

启用

document.getElementById("btnPlaceOrder").disabled = false; 
我用作$('#btnPlaceOrder')[0].disabled = falsejquery 选择器似乎返回一个数组。耸耸肩。
2021-03-13 10:12:02
jquery !== javascript。jquery 返回一个类似数组的选择器。
2021-03-28 10:12:02
@levininja, Chilly — $('#btnPlaceOrder').prop('disabled',false);
2021-04-02 10:12:02
出于某种原因,这对我有用,即使$('#btnPlaceOrder').disabled = false;没有。
2021-04-10 10:12:02

它是一个属性,但是一个布尔值(所以它不需要名称,只需要一个值——我知道,这很奇怪)。您可以在 Javascript 中设置等效的属性:

document.getElementsByName("myButton")[0].disabled = true;
它确实需要一个值,它是它不需要的名称。(奇怪,但真实)。
2021-03-25 10:12:02
@David:我记得以前读过,已修复。这确实很奇怪,如果语法荧光笔正确地尊重它,可能会更有意义:-)
2021-04-08 10:12:02

请尝试以下操作:

document.getElementById("id").setAttribute("disabled", "disabled");
正如David Dorward 所提到的,这不能完全依赖于跨浏览器,而应使用等效的属性。
2021-03-25 10:12:02

disabled在 an上设置属性的官方方法HTMLInputElement是这样的:

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');

虽然@kaushar 的答案足以启用和禁用HTMLInputElement,并且由于 IE 历史上的错误setAttribute,它可能更适合跨浏览器兼容性,但它仅适用于Element属性隐藏Element属性。如果设置了属性,则 DOM 默认使用该属性的值,而不是等效属性的值。

属性和属性之间有一个非常重要的区别。一个真实HTMLInputElement 属性的例子input.value,下面演示了阴影如何工作的:

var input = document.querySelector('#test');

// the attribute works as expected
console.log('old attribute:', input.getAttribute('value'));
// the property is equal to the attribute when the property is not explicitly set
console.log('old property:', input.value);

// change the input's value property
input.value = "My New Value";

// the attribute remains there because it still exists in the DOM markup
console.log('new attribute:', input.getAttribute('value'));
// but the property is equal to the set value due to the shadowing effect
console.log('new property:', input.value);
<input id="test" type="text" value="Hello World" />

这就是说属性隐藏属性的意思。这个概念也适用于prototype上的继承属性

我希望这可以澄清有关属性和属性之间差异的任何混淆。