夏日博客

A-A+

Bootstrap中点击后禁用按钮的最佳方法

2016年01月13日 前端设计 暂无评论 阅读 7 views 次

Bootstrap中点击后禁用按钮与js有什么区别呢要如何来实现呢，今天我们就一起来看一篇关于Bootstrap中点击后禁用按钮的最佳方法，具体的例子如下所示．

为了防止在Bootstrap中点击按钮多次提交，所以希望点击按钮后禁用按钮。

具体实现方法如下:

  1. //禁用button  
  2. $('button').addClass('disabled'); // Disables visually  
  3. $('button').prop('disabled', true); // Disables visually + functionally  
  4.    
  5. //禁用类型为button的input按钮  
  6. $('input[type=button]').addClass('disabled'); // Disables visually  
  7. $('input[type=button]').prop('disabled', true); // Disables visually + functionally  
  8.    
  9. //禁用超链接  
  10. $('a').addClass('disabled'); // Disables visually  
  11. $('a').prop('disabled', true); // Does nothing  
  12. $('a').attr('disabled', 'disabled'); // Disables visually  

将上面方法写入点击事件中即可，如：

  1. $(".btn-check").click(function () {  
  2.             $('button').addClass('disabled'); // Disables visually  
  3. $('button').prop('disabled', true); // Disables visually + functionally  
  4. });  

js按钮点击后几秒内不可用:

  1. function timer(time) {  
  2.  var btn = $("#sendButton");  
  3.  btn.attr("disabled", true);  //按钮禁止点击  
  4.  btn.val(time <= 0 ? "发送动态密码" : ("" + (time) + "秒后可发送"));  
  5.  var hander = setInterval(function() {  
  6.   if (time <= 0) {  
  7.    clearInterval(hander); //清除倒计时  
  8.    btn.val("发送动态密码");  
  9.    btn.attr("disabled", false);  
  10.    return false;  
  11.   }else {  
  12.    btn.val("" + (time--) + "秒后可发送");  
  13.   }  
  14.  }, 1000);  
  15. }  
  16.   
  17. //调用方法  
  18. timer(30);  
标签：

给我留言