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="登录">
</div>
</div>
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,按钮变绿,效果图:
image
点击登录会发送数据:
image
当我们取消按钮效果图:
image
注意火狐浏览器有一个缺点,就是当你选中checkbox,刷新页面,它还是被选中的,解决这个问题的方法就是在这个checkbox上加一个autocomplete="off";