如何将按钮点击后禁用

最新推荐文章于 2025-06-11 15:27:06 发布

张广森

最新推荐文章于 2025-06-11 15:27:06 发布

阅读量7.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/fgdfgasd/article/details/8823672

js 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了使用jQuery在网页中实现按钮禁用的方法，以防止用户在表单提交过程中重复点击按钮导致的数据重复提交问题。提供了三种解决方案：直接操作按钮状态、引入辅助按钮触发回发及使用setTimeout延迟禁用。

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

1.按钮的id为btnzhuce
==》控制按钮为禁用：
$("#btnzhuce").attr({"disabled":"disabled"});
==》控制按钮为可用
$("#btnzhuce").removeAttr("disabled");//将按钮可用

2.
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function enableButton(flag) {
$("#btnTest").attr("disabled", flag? "" : "disabled");
}
$(document).ready(
function ()
$("#btnTest").click(
function () {
enableButton( false );//点击后禁用
}
);
}
);
</script>
然而事实很遗憾的告诉我们这种方式行不通：页面根本不会回发。于是，我们不得不寻找其他方式。
二、让回发的按钮退居二线:
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function enableButton(flag) {
$("#btnTest").attr("disabled", flag? "" : "disabled");
}
$(document).ready(
function () {
$("#btnTest").click(
function () {
enableButton(false);
$("#btnTest2").click();//禁用掉自身并调用真正触发回发的按钮的click事件
}
);
}
);
</script>
<input type="button" value="点击后禁用" id="btnTest" />
<asp:Button ID="btnTest2" Text="点击后禁用" runat="server" OnClick="Test" style="display:none"/>
这样一来我们的目的达到了。最后再介绍一种方式：三、利用setTimeout实现
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function enableButton(flag) {
$("#btnTest").attr("disabled", flag? "" : "disabled");
}
$(document).ready(
function () {
$("#btnTest").click(
function () {
setTimeout(function ()
enableButton(false);
},
50);
}
);
}
);
</script>
</head>
<asp:Button ID="btnTest" Text="点击后禁用" runat="server" OnClick="Test"/>