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图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
js禁止表单重复提交
Aug 29 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
JS实现li标签的删除
2019/04/12 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
JS实现密码框效果
2020/09/10 Javascript
Python打印输出数组中全部元素
2018/03/13 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
新学期开学寄语
2014/01/18 职场文书
小学生检讨书大全
2014/02/06 职场文书
房产分割协议书范文
2014/11/21 职场文书
学校工会工作总结2015
2015/05/19 职场文书
酒桌上的开场白
2015/06/01 职场文书
食堂管理制度范本
2015/08/04 职场文书
市级三好生竞选稿
2015/11/21 职场文书