点击按钮一次之后禁用按钮

谁践踏了优雅 2022-07-12 11:29 432阅读 0赞

# 点击按钮一次之后禁用按钮 #

这里我们可以用几种方法，首先第一种是用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>

这样子的结果也是b1的按钮点击了一次之后按钮就呈现出灰白色的状态不可用了，而b2按钮仍然可以使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，432人围观）

还没有评论，来说两句吧...

相关阅读

相关按钮—按钮点击特效

按钮—按钮点击特效 ![在这里插入图片描述][2021041819283044.gif_pic_center] <!DOCTYPE html> <htm

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:54/ 0 赞/ 319 阅读

相关点击提交按钮后禁用提交按钮3秒后再启用

功能:防止乱点,多次触发事件效果:点击提交按钮后禁用提交按钮3秒后再启用提交表单 <input class="btn btn-primary radius

港控/mmm°/ 2022年11月26日 07:54/ 0 赞/ 244 阅读

相关点击复选框，按钮禁用/启用

长话短说，一个小功能，按钮最开始的时候是禁用，选择复选框后，按钮启用，再点击一下，按钮禁用。 ![Center][] 本次使用angularjs混合jquery来使用

骑猪看日落/ 2022年08月20日 10:29/ 0 赞/ 265 阅读

相关点击按钮一次，请求两次问题解决

把代码： $("conmmitBtn").click（function() {}); 改成： $("conmmitBtn").off().on(

柔情只为你懂/ 2022年07月14日 19:26/ 0 赞/ 288 阅读

相关监听按钮点击事件

3中注册监听方式比较 1.匿名内部类需要获取控件对象，使用变量不方便；适用于单个事件 2.实现接口需要获取控件对象，使用变量方便；适用于于多个事件 3.设置onC

怼烎@/ 2022年07月12日 12:45/ 0 赞/ 369 阅读

相关点击按钮一次之后禁用按钮

点击按钮一次之后禁用按钮这里我们可以用几种方法，首先第一种是用unbind()这个方法。先举个例子： <html> <head> <script type="

谁践踏了优雅/ 2022年07月12日 11:29/ 0 赞/ 433 阅读

相关模拟点击网页按钮

转自：http://blog.csdn.net/tiantian1980/article/details/12322191 [Demo下载][Demo]

た入场券/ 2022年06月01日 23:36/ 0 赞/ 353 阅读

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 977 阅读

相关按钮点击触发的事件只生效一次

朋友的一个面试题如下：面试官问：写一个函数，使按钮点击触发的事件只生效一次？？？你：。。。【往下看】方法1： / 方法1: 通过

我就是我/ 2021年09月19日 06:38/ 0 赞/ 597 阅读

相关 jquery自动点击按钮

jquery自动点击按钮 $(document).ready(function()\{ $("\imgcode\_img").tr

系统管理员/ 2021年09月12日 07:34/ 0 赞/ 613 阅读