如何使用JavaScript禁用HTML按钮?

2020/10/19 18:02 · javascript ·  · 0评论

我读到您可以仅通过将HTML按钮附加disable到其标签来禁用(使其实际上不可点击),但不能其作为属性,如下所示:

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

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

由于此设置不是属性

这是一个属性。

一些属性定义为布尔值,这意味着您可以指定它们的值,而忽略其他所有内容。,您只包括粗体部分,而不是disabled =“ disabled ”。在HTML 4中,您应该只包括粗体部分,因为完整版被标记为功能受支持的功能(尽管编写规范时相比,现在情况不那么正确了)。

从HTML 5开始,规则已更改,现在您仅包括名称,而不包括值。由于名称和值相同,因此没有实际区别。

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

foo.disabled = true;

从理论上讲,您也可以foo.setAttribute('disabled', 'disabled');foo.removeAttribute("disabled"),但是我不相信Internet Explorer的较早版本(就臭名昭著的Bug而言setAttribute)。

禁用

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

启用

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

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

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

请尝试以下操作:

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

在上设置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的答案足以启用和禁用an HTMLInputElement,并且由于IE的历史悠久的错误原因,可能对于跨浏览器兼容性更可取setAttribute,但它仅适用于Element属性阴影Element属性。如果设置了属性,则DOM默认使用该属性的值,而不是等效属性的值。

属性和属性之间存在非常重要的区别。trueHTMLInputElement 属性的示例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上的继承属性

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

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

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

... 已验证。

如果您有按钮对象,则称为b: b.disabled=false;

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

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

它可以很好地跨浏览器。

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

您仍然可以使用属性。只需使用“禁用”属性代替“值”即可。

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptjinyonghtmlanniu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!