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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 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
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
javascript基本语法分析说明
2008/06/15 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript学习笔记之JS对象
2015/01/22 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
深入解析Python中的线程同步方法
2016/06/14 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
spring boot实现文件上传
2022/08/14 Java/Android