通过本文主要向大家介绍了bootstrap,禁用按钮,bootstrap,按钮点击后等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
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中按钮点击后被禁用按钮的最佳实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
您可能想查找下面的文章:
- 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
- jQuery开源组件BootstrapValidator使用详解
- Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
- BootStrap中jQuery插件Carousel实现轮播广告效果
- 浅析bootstrap原理及优缺点
- Jquery与Bootstrap实现后台管理页面增删改查功能示例
- 根据Bootstrap Paginator改写的js分页插件
- jquery插件bootstrapValidator表单验证详解
- 最常见的左侧分类菜单栏jQuery实现代码
- BootStrap树状图显示功能

