twitter-bootstrap 如何使用javascript一键禁用引导按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35956605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:44:25  来源:igfitidea点击:

How to disable bootstrap button after one click using javascript

javascriptjquerytwitter-bootstrap

提问by Shashidhar

How do I disable a Bootstrap button after it is clicked using Javascript. I am using the onclickevent but it doesn't get disabled.

如何在使用 Javascript 单击后禁用 Bootstrap 按钮。我正在使用该onclick事件,但它没有被禁用。

Code:

代码:

<div class="panel-heading">
    <div class="btn-group pull-right"> 
         <a href="/assign" class="btn btn-success">Assign</a>
         <a href="#" class="btn btn-primary" onclick="this.disabled=true">Upload</a>
   </div>
</div>

回答by chris97ong

$("#buttonid").on("click", function() {
    $(this).prop("disabled", true);
});

回答by Jesper Christensen

add

添加

$(this).prop("disabled",true);

to you click event function

给你点击事件功能

回答by Robert Gale

The following solution can be used when an element (e.g. button, or link) is rendered as an A(anchor) tag (e.g. command link-buttons in ASPX pages). (Anchors do not have an (HTML) disable attribute, so cannot simply be disabled by setting that attribute. Slightly confusingly, Bootstrap will make the button appearto be disabled, but in practice another click (or worse still, double-clicks) will cause an on-click or href (where this is actually "javascript:...") to be re-invoked.)

当元素(例如按钮或链接)呈现为A(锚点)标记(例如 ASPX 页面中的命令链接按钮)时,可以使用以下解决方案。(锚没有 (HTML) 禁用属性,因此不能简单地通过设置该属性来禁用。稍微令人困惑的是,Bootstrap 会使按钮看起来被禁用,但实际上再次单击(或更糟的是,双击)将导致点击或href(实际上是“javascript:...”)被重新调用。)

NB: Needs jquery.

注意:需要jquery。

  1. Add the script from the jsfiddle reference below, to your master page or individual pages.

  2. Apply the disableafteroneclickclass to any button rendered as an anchor (A) where you want to restrict second/double clicks

  3. Optionally, add to the a/button data-disabledtextattribute (this will replace the text on the button after the first click.

  1. 将下面 jsfiddle 参考中的脚本添加到您的母版页或单个页面。

  2. disableafteroneclick类应用于任何呈现为锚点 (A) 的按钮,您希望在其中限制第二次/双击

  3. 或者,添加到 a/button data-disabledtext属性(这将在第一次单击后替换按钮上的文本。

NB: The disabled nature of the button will only be removed when the page is re-rendered - so this is mostly used where (for example) a submit button which must be click only once, will move the user to another page.

注意:按钮的禁用特性仅在页面重新呈现时才会被删除 - 因此这主要用于(例如)必须仅单击一次的提交按钮将用户移动到另一个页面的情况。

You'll see I've used the lines:

你会看到我使用了以下几行:

if ($(this).attr("href")) window.location = $(this).attr("href");
return false;

for the first click (where the invocation is needed) - which might have been replaced with simply:

对于第一次点击(需要调用的地方) - 可能已简单地替换为:

return true;

...but discovered that this doesn't work for IE <= 8 - and our clients need to provide support for IE8! If you know you won't need that, then you certainly could use the simplified code created by that replacement.

...但发现这不适用于 IE <= 8 - 我们的客户需要提供对 IE8 的支持!如果您知道不需要它,那么您当然可以使用由该替换创建的简化代码。

Code is at: https://jsfiddle.net/robertgalesorguk/qbq1n369/4/

代码位于:https: //jsfiddle.net/robertgalesorguk/qbq1n369/4/