JavaScript如何实现，点击按钮一次之后按钮禁用？

最新推荐文章于 2025-01-07 18:01:08 发布

一亩地

最新推荐文章于 2025-01-07 18:01:08 发布

阅读量1.1w

点赞数 2

分类专栏： ❤ JavaScript -----JavaScript库jQuery 文章标签： JavaScript 点击按钮一次之后按钮禁用

本文链接：https://blog.youkuaiyun.com/Aaroun/article/details/84969574

版权

❤ JavaScript 同时被 2 个专栏收录

48 篇文章

订阅专栏

-----JavaScript库jQuery

8 篇文章

订阅专栏

点击按钮一次之后按钮禁用的3种方法如下：

1、首先第一种是用unbind()这个方法。

先举个例子：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
alert("ok1");
});
$("#b1").click(function(){
$("#b1").unbind();
});
$("#b2").click(function(){
alert("ok2");
});
});
</script>
</head>
<body>
<button id="b1">b1</button>
<button id="b2">b2</button>
</body>
</html>

实验的结果就是当我们第一次点击按钮的时候，按钮b1是可以用的，b2也可以使用，但是第二次点击之后，按钮b1便不可以使用了，但是按钮b2依旧可以使用。
因为这里我只设置了b1点击一次后禁用按钮，而b2没有设置。

2.当我们采用JS来考虑的时候

document.getElementById("b1").disabled=true;

3.我们利用jQuery来考虑的时候

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#b1').click(function(){
$('#b1').attr("disabled","true");
alert("11");
});
$('#b2').click(function(){
alert("12");
});
});

</script>
</head>
<body>
<button id="b1" >删除 p 元素的事件处理器</button>
<button id="b2">删除 p 元素的事件处理器</button>
</body>
</html>