Question

我已经读过您可以通过将disable附加到其标记而不是作为属性来禁用（使物理上无法点击）HTML按钮，如下所示：

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

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

Answer 1

由于此设置不是属性

这是一个属性。

某些属性被定义为boolean，这意味着您可以指定其值并将其他所有内容保留。即，仅包括粗体部分，而不是禁用=“禁用”。在HTML 4中，应仅包含粗体部分，因为完整版本标记为a feature with limited support（尽管现在编写规范时不太正确）。

从HTML 5开始，规则已经更改，现在只包含名称而不包含值。这没有实际区别，因为名称和值是相同的。

DOM property也称为disabled，是一个采用true或false的布尔值。

foo.disabled = true;

从理论上讲，您也可以foo.setAttribute('disabled', 'disabled');和foo.removeAttribute("disabled")，但我不相信旧版本的Internet Explorer（在setAttribute方面，这是众所周知的错误）。< / p>

Answer 2

禁用

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

启用

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

Answer 3

它是一个属性，但是一个布尔值（因此它不需要名称，只需要一个值 - 我知道，这很奇怪）。您可以在Javascript中设置等效的属性：

document.getElementsByName("myButton")[0].disabled = true;

Answer 4

尝试以下方法：

document.getElementById("id").setAttribute("disabled", "disabled");

Answer 5

在disabled上设置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's answer足以启用和禁用HTMLInputElement，但由于IE历史上的错误setAttribute，它可能更适合跨浏览器兼容性，但它只适用于Element属性shadow Element属性。如果设置了属性，那么DOM默认使用属性的值而不是等效属性的值。

属性和属性之间存在非常重要的区别。真实HTMLInputElement 属性的示例是input.value，下面演示了阴影的工作原理：

＆＃13;

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

＆＃13;

<input id="test" type="text" value="Hello World" />

＆＃13;

这就是说属性影子属性的含义。此概念也适用于prototype链上的继承属性：

＆＃13;

function Parent() {
  this.property = 'ParentInstance';
}

Parent.prototype.property = 'ParentPrototype';

// ES5 inheritance
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

function Child() {
  // ES5 super()
  Parent.call(this);

  this.property = 'ChildInstance';
}

Child.prototype.property = 'ChildPrototype';

logChain('new Parent()');

log('-------------------------------');
logChain('Object.create(Parent.prototype)');

log('-----------');
logChain('new Child()');

log('------------------------------');
logChain('Object.create(Child.prototype)');

// below is for demonstration purposes
// don't ever actually use document.write(), eval(), or access __proto__
function log(value) {
  document.write(`<pre>${value}</pre>`);
}

function logChain(code) {
  log(code);

  var object = eval(code);

  do {
    log(`${object.constructor.name} ${object instanceof object.constructor ? 'instance' : 'prototype'} property: ${JSON.stringify(object.property)}`);
    
    object = object.__proto__;
  } while (object !== null);
}

＆＃13;

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

Answer 6

如果您有按钮对象，名为b：b.disabled=false;

Answer 7

它仍然是一个属性。将其设置为：

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

...有效。

Answer 8

我认为最好的方法可能是：

$("#ctl00_ContentPlaceHolder1_btnPlaceOrder").attr('disabled', true);

它可以很好地跨浏览器。

Answer 9

<button disabled=true>text here</button>

您仍然可以使用属性。只需使用“禁用”功能即可。属性而不是＆＃39;值＆＃39;。

如何使用JavaScript禁用HTML按钮？

9 个答案: