如何访问已禁用的按钮

Question

表单中的 html 按钮被动态禁用

document.getElementById('Btn').disabled = true;

稍后，我想知道按钮的状态，如果禁用或启用。使用以下方法不起作用：

if (document.getElementById('Btn').disabled == "true") {

解决方案是什么？

Answer 1

你可以只使用：

if (document.getElementById('Btn').disabled) {

浏览器将呈现disabled="disabled"或仅disabled。这取决于浏览器实现。因此，仅检查true禁用属性的字符串是行不通的。

前面的代码将只检查它是否禁用了属性或说禁用的属性在那里可用。

Answer 2

disabled属性访问器可能非常混乱。有一个属性和一个隐藏属性的属性访问器。

您可以使用document.getElementById('Btn').hasAttribute('disabled')来检查元素是否被禁用，或者只是document.getElementById('Btn').disabled，因为属性 getter 也返回一个布尔值：

function logAttribute (btn, attr) {
console.log(`hasAttribute ${btn.hasAttribute(attr)}`)
console.log(`getAttribute ${btn.getAttribute(attr)}`)
console.log(`hasOwnProperty ${btn.hasOwnProperty(attr)}`)
console.log(`[attr] ${btn[attr]}`)
}
const btn = document.createElement('button')
console.log('----- uninitialized')
logAttribute(btn, 'disabled')
btn.disabled = true
console.log('----- set')
logAttribute(btn, 'disabled')
btn.disabled = false
console.log('----- unset')
logAttribute(btn, 'disabled')

.as-console-wrapper{max-height:100%!important;}

Answer 3

属性disabled保存布尔值而不是字符串，因此它必须是：

if (document.getElementById('Btn').disabled == true) {

或者只是

if (document.getElementById('Btn').disabled) {

w3c html5： 4.10.7 输入元素：

interface HTMLInputElement : HTMLElement {
// ... 
attribute boolean disabled;
}

因此，无论属性或属性的值是什么，如果您访问属性disabled，您都将始终得到一个布尔值。