BootStrap中按钮点击后被禁用按钮的最佳实现方法


Posted in Javascript onSeptember 23, 2016

Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢,今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法,具体的例子如下所示.

为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮。

具体实现方法如下:

//禁用button 
$('button').addClass('disabled'); // Disables visually 
$('button').prop('disabled', true); // Disables visually + functionally 
//禁用类型为button的input按钮 
$('input[type=button]').addClass('disabled'); // Disables visually 
$('input[type=button]').prop('disabled', true); // Disables visually + functionally 
//禁用超链接 
$('a').addClass('disabled'); // Disables visually 
$('a').prop('disabled', true); // Does nothing 
$('a').attr('disabled', 'disabled'); // Disables visually 
将上面方法写入点击事件中即可,如:
$(".btn-check").click(function () { 
$('button').addClass('disabled'); // Disables visually 
$('button').prop('disabled', true); // Disables visually + functionally 
}); 
js按钮点击后几秒内不可用:
function timer(time) { 
var btn = $("#sendButton"); 
btn.attr("disabled", true); //按钮禁止点击 
btn.val(time <= 0 ? "发送动态密码" : ("" + (time) + "秒后可发送")); 
var hander = setInterval(function() { 
if (time <= 0) { 
clearInterval(hander); //清除倒计时 
btn.val("发送动态密码"); 
btn.attr("disabled", false); 
return false; 
}else { 
btn.val("" + (time--) + "秒后可发送"); 
} 
}, 1000); 
} 
//调用方法 
timer(30);

以上所述是小编给大家介绍的BootStrap中按钮点击后被禁用按钮的最佳实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 #Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 #Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 #Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 #Javascript
AngularJS监听路由的变化示例代码
Sep 23 #Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
python远程登录代码
2008/04/29 Python
浅析python中的分片与截断序列
2016/08/09 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python 日志增量抓取实现方法
2018/04/28 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
班组长的岗位职责
2013/12/09 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技