bootstrap教程|Bootstrap中点击后禁用按钮的最佳方法

更新时间:2020-04-02    来源:按钮特效    手机版     字体:

【www.bbyears.com--按钮特效】

为了防止在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);

本文来源:http://www.bbyears.com/wangyetexiao/91417.html

热门标签

更多>>

本类排行