1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 复选框+按钮的disabled属性

复选框+按钮的disabled属性

时间:2023-09-20 16:39:53

相关推荐

复选框+按钮的disabled属性

开发工具与关键技术: VS , 按钮的disabled属性;

作者:刘佳明

撰写时间: 6 月 6 日

今天介绍份知识点是按钮的disabled属性,

在项目的需求中,有根据复选框的是否选中来改变页面的一些布局,今天小编就为大家介绍一种简单点的情况-----勾选复选框,对应按钮的disabled属性改变,按钮的点击效果也随之改变;

HTML代码

<button type="button" class="btn btn-primary" id="trueCherck" onclick="trueCherck()">审核</button><button type="button" class="btn btn-primary" id="falseCherck" onclick="falseCherck()">反审核</button><div class="ml-4 mt-2 col-2"><input type="checkbox" class="form-check-input" id="exampleCheck1" value="true" ><label class="ml-4 form-check-label" for="exampleCheck1">审核</label></div>

首先,来一张效果截图,以上图中,有两个标记的按钮, 为审核按钮,反审核按钮,目前呢,是有两种效果的显示,

JS代码

//jquery中没有定义获取input中checked属性的方法,需靠js 实现获取$("#exampleCheck1").click(function () {var checked = document.getElementById("exampleCheck1").checked ;if (checked == true) {$("#trueCherck").prop("disabled", true);$("#falseCherck").prop("disabled", false);//layer.alert("目前的状态为true", { title: "提示", icon: 3 });}else {$("#trueCherck").prop("disabled", false);$("#falseCherck").prop("disabled", true);//layer.alert("目前的状态为false", { title: "提示", icon: 3 })}});

第一种,点击两个按钮是,复选框对应的勾选或者不勾选,第二种是去勾选或者去除审核复选框的勾选情况,对应的两个按钮会出现能够点击和不能点击的效果,

//点击按钮,审核状态变化//点击审核function trueCherck() {//$("#exampleCheck1").checked = true;document.getElementById("exampleCheck1").checked = true;}//点击反审核function falseCherck() {//$("#exampleCheck1").checked = false;document.getElementById("exampleCheck1").checked = false;var aa = document.getElementById("exampleCheck1").checked}

需要注意的是,在实现以上两种情况时,对应如何获取input复选框的勾选情况,判断它是否为true,false情况,小编使用的js 获取,(也尝试使用Jquery获取,但发现并不能如愿,代码已注释,可以参考一下),其它的到并没有什么特别大的代码阻碍?

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。