复选框+按钮的disabled属性

最新推荐文章于 2024-03-23 10:29:22 发布

没有，

最新推荐文章于 2024-03-23 10:29:22 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

文章标签： MVC 按钮disabled属性

本文链接：https://blog.youkuaiyun.com/weixin_44540130/article/details/91352017

本文由刘佳明分享，介绍了在VS项目中如何利用HTML和JavaScript根据复选框的选中状态改变按钮的disabled属性，从而影响按钮的可点击效果。通过示例代码展示了两种情况：复选框勾选与未勾选时，审核和反审核按钮的状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术： 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获取，但发现并不能如愿，代码已注释，可以参考一下），其它的到并没有什么特别大的代码阻碍?