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

时间:2016-11-10519举报小编:youjiejie

    BootStrap怎么禁用点击按钮,BootStrap禁用点击按钮方法,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中按钮点击后被禁用按钮的最佳实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对未来软件园的支持!