button按钮添加disabled属性后不能触发点击事件的解决方法

button按钮里添加了disabled属性，是不能再触发点击事件的，但是我们可以给button添加一个div标签，在div里面添加点击事件。 

html代码：
<div class="main">
    <input type="checkbox" id="check" onclick="onCheck()" autocomplete="off">记住我
    <div onclick="onBtn()">
        <input type="button" id="btn" disabled="disabled" value="登录">

css代码：
<style>
.main{
    width:300px;
    height:100px;
    margin:30px auto;
#btn{
    width:100px;
    height:35px;
    text-align:center;
    outline:none;
    border:none;
    border-radius:4px;
    background-color:#e2e2e2;
    color:#cfcfcf;
    font-size:1.2em;
</style>

图片.png


我们想做出当我勾选checkbox，按钮的disabled属性取消，按钮颜色也变了，也可以提交登录信息，button按钮不可以触发onclick,但是我们可以用div上的的onclick事件提交信息；

js代码：


js代码：
<script>
var check =document.getElementById('check');
var btn =document.getElementById('btn');
function onCheck(){
      if(check.checked){
          btn.style.color="white";
          btn.style.backgroundColor="#1AAD19"
          btn.disabled=""
      }else{
          btn.style.color="#cfcfcf";
          btn.style.backgroundColor="#e2e2e2"
          btn.disabled="disabled"
function onBtn() {
        console.log(1);
</script>

当我们勾选checkbox,按钮变绿，效果图：