<!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以及小程序等框架的来说,因为很容易弄混,所以这一点必须清楚。


阳哥
14 声望0 粉丝

一个code爱好者,一个户外运动的爱好者,一个喜欢音乐的爱好者。