复选框+按钮的disabled属性

冷不防 2022-01-21 08:43 368阅读 0赞

开发工具与关键技术： VS ， 按钮的disabled属性；  
作者：刘佳明  
撰写时间：2019年 6 月 6 日

今天介绍份知识点是按钮的disabled属性，  
在项目的需求中，有根据复选框的是否选中来改变页面的一些布局，今天小编就为大家介绍一种简单点的情况-----勾选复选框，对应按钮的disabled属性改变，按钮的点击效果也随之改变；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]

HTML代码

首先，来一张效果截图，以上图中，有两个标记的按钮， 为审核按钮，反审核按钮，目前呢，是有两种效果的显示，  
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获取，但发现并不能如愿，代码已注释，可以参考一下），其它的到并没有什么特别大的代码阻碍?

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220121/6ec203b6ba384f7d94a74dbd2743b0de.png