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);

时间: 2024-07-28 23:44:42

Bootstrap中点击后禁用按钮的最佳方法的相关文章

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

Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢,今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法,具体的例子如下所示. 为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮. 具体实现方法如下: //禁用button $('button').addClass('disabled'); // Disables visually $('button').prop('disabled', true); // Disables visual

全面解析Bootstrap中Carousel轮播的使用方法_javascript技巧

本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下 源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分  1.1.容器:最外层div,需要一个data-ride="carousel"来指定为轮播放插件,并且提供一个Id,方便圆圈指示符的关联   1.2.图片列表部分,用一个外层div包裹所有,然后

全面解析Bootstrap中nav、collapse的使用方法_javascript技巧

一.导航分析(nav) 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是用css进行了样式修饰,对Js没有任何依赖 2.导航模块可以包含下拉模块 3.实现了水平.垂直.水平平均分配(table-cell实现,4.0移除).tabs.胶囊等样式 4.Nav-divider:有一个像素的高度实现分隔线 5.Nav-stacked:垂直对齐实现 6.提供了tab-conte

全面解析Bootstrap中transition、affix的使用方法_javascript技巧

一.Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用.实现根据浏览器支持transition的能力,然后绑定动画的结束事件: 首先:创建一个Element: 然后:迭代查看此元素支持的transition动画名称 Transition实现的技巧,主要是重写了jquery的event对象,代码如下: $(function () { $.support.transition = transitionEnd() if (!$.support.transition) return

全面解析Bootstrap中form、navbar的使用方法_javascript技巧

一.表单(Form) 源码文件:_form.scss mixins/_form.scss 1.按层次结构分:form-group -> form-control/input-group/form-static-control -> 各类标签 2.Form-group/form-control/input-group/form-static-control之类的容器,分为两种显示方式:block.inline-block.而实现input-group水平用的是table-cell. .input

全面解析Bootstrap中tooltip、popover的使用方法_javascript技巧

一.tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理:  1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.width.height等) 2.计算tooltip的位置,是top.left.bottom.right其中一个 3.然后根据计算的位置值,运算出坐标值 4.给tooltip应用坐标值  源码分析:  1.ownerDocument:文档:包含两个对象:<DocType>.documentEleme

Bootstrap中CSS的使用方法_javascript技巧

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo

ASP中"禁用浏览器后退按钮"

浏览器的后退按钮使得我们能够方便地返回以前访问过的页面,它无疑非常有用.但有时候我们不得不关闭这个功能,以防止用户打乱预定的页面访问次序.本文介绍网络上可找到的各种禁用浏览器后退按钮方案,分析它们各自的优缺点和适用场合. 一.概述 曾经有许多人问起,"怎样才能'禁用'浏览器的后退按钮?",或者"怎样才能防止用户点击后退按钮返回以前浏览过的页面?"在ASP论坛上,这个问题也是问得最多的问题之一.遗憾的是,答案非常简单:我们无法禁用浏览器的后退按钮. 起先我对于居然有人

asp.net下按钮点击后禁用的实现代码

一.让按钮在点击后用脚本使其禁用: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DisableButton.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//