bootstrapValidator 重新启用提交按钮的方法

bootstrapValidator 使用中，由于字段检查等原因，致使提交按钮失效。如何重新启用提交按钮呢？

下面一句代码可以实现启用提交按钮：

$('#loginForm').bootstrapValidator('disableSubmitButtons', false);

下面看下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);

以上所示是小编给大家介绍的bootstrapValidator 重新启用提交按钮的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • jquery插件bootstrapValidator表单验证详解

    jquery插件bootstrapValidator表单验证详解

    Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali

  • BootstrapValidator不触发校验的实现代码

    BootstrapValidator不触发校验的实现代码

    一.前言 BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得 二.问题描述 当按钮的类型为submit时,使用bootstrapValidator的isValid()能够使验证表单正常工作,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法无法正常工作.这时候就需要使用bootstrapValida

  • bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    一.前言 使用bootstrap-datepicker和bootstrapValidator也有一段时间了,在工作中发现两者同时使用时会出现的一种问题,当选择完日期后,并不会正确校验该字段.为了更加直观的展现问题,上图一张. 可以看出,当选择完日期后,校验结果并没有达到预期,是因为bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段.so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交,当手动把

  • Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

    1.引入css与js bootstrapValidator.min.css bootstrapValidator.min.js 2.html中的modal代码 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true&q

  • 基于BootstrapValidator的Form表单验证(24)

    基于BootstrapValidator的Form表单验证(24)

    Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果. 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入: <link href="//cd

  • jquery插件bootstrapValidator数据验证详解

    jquery插件bootstrapValidator数据验证详解

    因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. bootstrap:能够增加兼容性的强大框架. 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js (下载实例) 以上这些都是必须的. 先上个简单的例子,只要导入相应的文件可以直接运行: <!DOCTYP

  • BootstrapValidator超详细教程(推荐)

    一.引入必要文件 下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/bootstrapVa

  • bootstrapValidator 重新启用提交按钮的方法

    bootstrapValidator 使用中,由于字段检查等原因,致使提交按钮失效.如何重新启用提交按钮呢? 下面一句代码可以实现启用提交按钮: $('#loginForm').bootstrapValidator('disableSubmitButtons', false); 下面看下Bootstrap中点击后禁用按钮的最佳方法 为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮. 具体实现方法如下: //禁用button $('button').addClass('d

  • jquery验证邮箱格式并显示提交按钮

    jquery验证邮箱格式并显示提交按钮

    简要教程 简洁.大方和直观的用户界面是我们最喜欢的网页设计.本文介绍的正是这样的一个设计风格. 如何才能做到页面的简洁大方并且人性化?大多数网站的表单采用文本提示的方法,提示用户哪里填写错了,哪里不正确,但我们应该能做得更好:填写不正确就不显示提交按钮! HTML结构 <form class="newsletter"> <input type="email" value="" placeholder="Enter yo

  • 阻止表单提交按钮多次提交的完美解决方法

    如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型. 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交. onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用. 或者向如下方法另行定义一个jQuery函数来进行控制: $("form").submi

  • 点击提交按钮后按钮变灰色不可用状态的三种方法

    第一种方法:直接按钮中加入 当点击提交后,提交按钮变灰色不可用,这样可有效防止重复提交,本代码就是实现这样一个功能.从代码就可以看出,我们只需在提交按钮上加入这一句: onclick="javascript:{this.disabled=true;document.form1.submit();}",意思是当按钮点击后,将按钮的不可用属性设置为true,这样按钮就变灰了 表单提交后按钮变成灰色 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 第二种方法:通过onSubmit

  • javascript实现表单提交后，提交按钮不可用的方法

    本文实例讲述了javascript实现表单提交后,提交按钮不可用的方法.分享给大家供大家参考.具体如下: 这里使用javascript控制表单提交后,提交按钮不可用,可以防止用户多次提交. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单提交后按钮禁用</title> &l

  • 按钮的Ajax请求时一次点击两次提交的解决方法

    页面中的按钮的type是submit的: <input type="submit" value="Create" id="submit" /> ajax的请求,在JQuery中是: $(function () { $('#submit').click(function () { var createGenreForm = $('#createGenreForm'); if (createGenreForm.valid()) { var

  • jQuery实现防止提交按钮被双击的方法

    本文实例讲述了jQuery实现防止提交按钮被双击的方法.分享给大家供大家参考.具体实现方法如下: $("#submit").one('click', function (event) { event.preventDefault(); //do something $(this).prop('disabled', true); }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法

    本文实例讲述了jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法.分享给大家供大家参考.具体实现方法如下: 这里主要通过val方法设置按钮的文字,并用attr方法修改disabled属性实现该功能. 主要代码如下: <html> <body> <form method="get" action="" target="box"> <input id="buttonid" ty

  • javascript实现点击提交按钮后显示loading的方法

    本文实例讲述了javascript实现点击提交按钮后显示loading的方法.分享给大家供大家参考.具体如下: 这里可以实现点击提交按钮后显示loading,防止用户重复提交 <style> #loading { position:absolute; width:500px; height:50px; top:50%; left:50%; margin: -25px -150px; background-color:#FFFFFF; border:1px solid #CCCCCC; text

  • yii form 表单提交之前JS在提交按钮的验证方法

    很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证,我这边设置的方法是在提交按钮上设置监听器,如果部分内容为空(比如多选按钮没有选择),那么提示出错信息.主要目的是页面不用提交后刷新,进入controller的对应函数之后再判断出错.显示rules()验证规则函数的错误信息. 这里为了验证是否选择某个单选按钮,对提交的按钮onclick设置监听,具体如下 <Button onclick = "return fun()&qu

随机推荐