如何禁用HTML按钮使用JavaScript?

小开

如果你有一个按钮对象，叫做b: b.disabled=false;

小开

它仍然是一个属性。设置为:

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

．.．是有效的。

小开

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

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

小开

最佳答案

因为这个设置不是一个属性

它是一个属性。

有些属性定义为布尔值，这意味着您可以指定它们的值，而不考虑其他任何内容。例如，你只包含粗体部分，而不是disabled="禁用"。在HTML 4中，你的应该只包括粗体部分，因为完整版本被标记为支持有限的特性(尽管现在写规范时不那么正确)。

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

DOM属性也被称为disabled，是一个接受true或false的布尔值。

foo.disabled = true;

理论上你也可以foo.setAttribute('disabled', 'disabled');和foo.removeAttribute("disabled")，但我不相信旧版本的Internet Explorer(当涉及到setAttribute时，它是出了名的bug)。

小开

试试下面的方法:

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

小开

禁用

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

要启用

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

小开

我认为最好的办法是:

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

它可以很好地跨浏览器工作。

小开

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

您仍然可以使用属性。只使用'disabled'属性而不是'value'。

小开

在HTMLInputElement上设置disabled属性的正式方法是:

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" />

That is what it means to say that properties shadow attributes. This concept also applies to inherited properties on the prototype chain:

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

我希望这澄清了关于属性和属性之间区别的任何困惑。