不可操作按钮

最新推荐文章于 2024-01-26 21:30:03 发布

北海军

最新推荐文章于 2024-01-26 21:30:03 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_39237755/article/details/79314939

css 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的按钮状态控制脚本。该脚本在点击“新增”按钮后，会锁定其他操作按钮（如保存、取消、返回），并改变它们的样式。当允许进行这些操作时，再通过回调函数恢复按钮的原始状态和样式。

////////////////////////js代码
jQuery(function () {
//新增后除保存取消返回不可进行其他操作
var saveBtn = $(".com_btn:contains('保存')");
var cancelBtn = $(".com_btn:contains('取消')");
var backBtn = $(".com_btn:contains('返回')");
var saveHtml = $(saveBtn).attr("onclick");
var cancelHtml = $(cancelBtn).attr("onclick");
var backHtml = $(backBtn).attr("onclick");
for (var i = 0, t = $(".com_btn").length, arr = []; i < t; i++) {
arr.push($($(".com_btn")[i]).attr("onclick"));
}
console.log(arr);

$('.center').on("click", '.com_btn:contains("新增")', function () {
for (var i = 0; i < t; i++) {
console.log(i);
$('.center').on("click", '.com_btn', function () {
if ($(this).text() == "保存" || $(this).text() == "取消" || $(this).text() == "返回") {
for (var i = 0; i < t; i++) {
$($(".com_btn")[i]).attr('onclick', arr[i]).css({ backgroundColor: "#C90328", cursor: "pointer" });
}
};
});

if (i == t - 1) {
$(this).siblings().attr("onclick", "").css({ backgroundColor: "#ebebeb", cursor: "not-allowed" });
$(this).css("background-color", "#C90328");
$(saveBtn).attr("onclick", saveHtml).css({ backgroundColor: "#C90328", cursor: "pointer" });
$(cancelBtn).attr("onclick", cancelHtml).css({ backgroundColor: "#C90328", cursor: "pointer" });
$(backBtn).attr("onclick", backHtml).css({ backgroundColor: "#C90328", cursor: "pointer" });
console.log($(this).siblings());
};

};
});

/////////////////html代码

<a class="link_query com_btn" onclick="f_Query();return false;">查询</a>
<a class="link_reset com_btn" onclick="f_Reset();return false;">重置</a>
<a class="link_new com_btn" onclick="f_Add();return false;">新增</a>
<a class="link_edit com_btn" onclick="f_Edit();return false;">修改</a>
<a class="link_save com_btn" onclick="f_Save();return false;">保存</a>
<a class="link_delete com_btn" onclick="f_Delete();return false;">删除</a>
<a class="link_cancel com_btn" onclick="f_Cancel();return false;">取消</a>
<a class="link_export com_btn" onclick="f_Export();return false;">导出</a>