复选框+按钮的disabled属性

开发工具与关键技术： VS ，按钮的disabled属性；
作者：刘佳明
撰写时间：2019年 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获取，但发现并不能如愿，代码已注释，可以参考一下），其它的到并没有什么特别大的代码阻碍?

复选框+按钮的disabled属性相关推荐

PyQt(Python+Qt)学习随笔：复选框checkBox的tristate属性
在Qt Designer中,tristate属性是复选框checkBox相比较于QAbstractButton多出来的唯一属性. tristate属性表示复选框是三种状态还是两种状态,如果trista ...
pythongui界面复选框数值选择并求和_如何使用Python从图像中分离复选框按钮和复......
我已经拆分了以并行方式排列的图像,并像下面的图像一样保存了它们. 这是我的工作代码,用于拆分方形复选框和该图像中的文本. # Import necessary libraries from matpl ...
判断鼠标不在控件上_VB常用控件属性讲解单选按钮、复选框总结
1 单选按钮.复选框做为VB编程中的选择性控件,在实际程序中有着广泛的应用,所以熟练掌握其特殊属性的用法就很重要了! 单选按钮.复选框的实际应用图复选框(CheckBox)控件属性说明 Name ...
css复选框表单,用CSS来美化表单——复选按钮篇
原标题:用CSS来美化表单--复选按钮篇今天,我们来学习如何利用CSS美化checkbox复选框按钮,过程非常简单,本文主要是提供美化复选框按钮的方法,至于美化到何种程度还需大家自己去举一反三,发挥 ...
html下拉复选框联动,HTML : CheckBox 复选框成组联动(JavaScript)
在页面中,经常需要控制一组 CheckBox 的选中状态,常用的操作有: 1.通过一个或者多个复选框来控制一组 CheckBox 的选中状态. 2.根据一组 CheckBox 的选中状态来决定某些控件 ...
jquery设置复选框为只读_checkbox设置复选框的只读效果不让用户勾选
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
单选按钮带文字_一分钟教会你用Word添加单选框和复选框
又到学习Word技巧的时候啦!学了这么长时间,你的技能点有没有增加呢?对表格的使用有没有更加熟练了?是否很好奇别人家的表格是怎么弄成可以单选框和复选框的效果呢~~~~下面让小编带你解锁新姿势~ 效果图 ...
html构建复选框标签,什么标签用于在表单中构建复选框_HTML表单复选框INPUT标签...
HTML表单复选框标签在HTML的表单控件中,复选框也是经常使用的控件,它可以让用户选择打勾或不打勾.它使用的也是标签. 一.定义标签用于表示文本框.密码框.单选框.复选框.文件上传框.普通按钮. ...
dw 复选框 php输出,Dreamweaver CS3的复选框使用方法
dreamweaver cs4 (dw cs4)中文正式版软件大小:143.3M授权方式:免费软件立即下载 Dreamweaver CS3复选框怎么用?Dreamweaver CS3复选框也是制作 ...

复选框+按钮的disabled属性

复选框+按钮的disabled属性相关推荐

最新文章

热门文章