<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn"> 加锁 </button>
<button id="btn2"> 解锁 </button>
<script>
var oBtn = document.getElementById('btn');
var oBtn2 = document.getElementById('btn2');
oBtn.addEventListener('click',function(){oBtn.setAttribute('disabled',true)
})
oBtn2.addEventListener('click',function(){oBtn.setAttribute('disabled',false)
})
</script>
</body>
</html>
// 点击加锁当前,给以后 dom 元素增加了 disabled=“true”属性。如下<button id="btn" disabled="true"> 加锁 </button>
// 点击解锁当前,给以后 dom 元素增加了 disabled=“false”属性。如下<button id="btn" disabled="false"> 加锁 </button>
然而。真正能起到成果的是上面的写法。
`
oBtn.addEventListener('click',function(){oBtn.setAttribute('disabled',true)
})
oBtn2.addEventListener('click',function(){oBtn.removeAttribute('disabled')
})
`
综上所述,起初我查看了对于 HTMLdom 元素官网文档。说的是只有设置
disabled=“disabled”, 或者就繁多的 disabled(目前很多浏览器都反对简写形式)能力将按钮禁用。至于如何设置回来,官网没说。然而实际上能够通过移除这个属性来达到成果。
对于常常写 vue 和 react 以及小程序等框架的来说,因为很容易弄混,所以这一点必须分明。