按钮的禁用

最新推荐文章于 2024-07-28 10:23:29 发布

.,.,.,.

最新推荐文章于 2024-07-28 10:23:29 发布

阅读量3.3k

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/llthh/article/details/121805685

版权

JavaScript 按钮禁用 DOM操作事件监听 layui-btn-disabled

关键词由CSDN通过智能技术生成

首先来看看样式
在这里插入图片描述

这是一个我们经常见的一个按钮的禁用效果
首先给按钮添加一个索引值，并且利用disabled属性使保存和取消禁用掉
index=1 index=2 index=3 index=4 index=5

首先给按钮们声明一个变量
var Tianjia = $(".Tianjia");
var Xiugai = $(".Xiugai");
var Baocun = $(".Baocun");
var Quxiao = $(".Quxiao");
var Shanchu = $(".Shanchu");
var Topul = $(".Topul li");

for (var i = 0; i < Topul.length; i++) {//用for循环遍历按钮
Topul[i].onclick = function () {//给它一个绑定事件
var myIndex = this.getAttribute(“index”)//获取索引index
Topul.removeClass(“layui-btn-disabled”);

            if (myIndex == 1) { //当索引为1
                Tianjia.addClass("layui-btn-disabled");//添加禁用类，使按钮禁用
                Xiugai.addClass("layui-btn-disabled");
                Shanchu.addClass("layui-btn-disabled");
            } else if (myIndex == 2) { //当索引为2
                Tianjia.addClass("layui-btn-disabled");
                Xiugai.addClass("layui-btn-disabled");
                Shanchu.addClass("layui-btn-disabled");
            } else if (myIndex == 3) {//当索引为3
                Baocun.addClass("layui-btn-disabled");
                Qux ao.addClass("layui-btn-disabled");  
            } else if (myIndex == 4) {//当索引为4
                Baocun.addClass("layui-btn-disabled");
                Quxiao.addClass("layui-btn-disabled");
            } else if (myIndex == 5) {//当索引为5
                Baocun.addClass("layui-btn-disabled");
                Quxiao.addClass("layui-btn-disabled");
            }
        }

}

主要是利用addClass(“layui-btn-disabled”)的属性值，当点击到索引值的时候，按钮就会添加一个禁用类，使按钮禁用