复选框勾选使登录按钮由禁用状态转换为激活状态

最新推荐文章于 2022-12-14 14:55:00 发布

weixin_44354089

最新推荐文章于 2022-12-14 14:55:00 发布

阅读量427

点赞数

分类专栏： CSS vue

本文链接：https://blog.csdn.net/weixin_44354089/article/details/113246520

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

禁用状态

激活状态

实现代码

       <input
         class="loginbutton"
         :disabled="checked == false"
         value="登录"
         />
       <div class="agreement">
        <input type='checkbox' class="grey/>
         已阅读《巴拉啦用户服务协议和隐私政策》
       </div>

<style>
.loginbutton[disabled] {
    background: rgb(156, 147, 147) !important;
}

.loginbutton {
    display: block;
    width: 100%;
    height: 40px;
    font-size: large;
    background: rgb(200, 56, 59) !important;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    margin: 10px 0px;
    cursor: pointer;
}
.grey {
    color: black;
    font-size: 12px;
}
</style>
<script>
export default {
  data() {
    return {
      checked: false
    }
  },
}

</script>