如何禁用ladda按钮？答案

【问题标题】：How to disable a ladda button?如何禁用ladda按钮？
【发布时间】：2014-09-23 22:07:28
【问题描述】：

我正在使用 Ladda UI 进行引导。

使用 jquery，我尝试在用户单击按钮后禁用它。

我尝试使用 ajax OnComplete / OnSuccess / OnBegin ，但无济于事 - 按钮保持启用状态。

如果我在 firebug 上手动更改标记 - 我可以禁用它。还要注意 js 肯定会触发。

这是标记：

<a id="icalSync" href="/iCal/iCalCreatedLinks" data-ajax-method="GET" data-ajax-complete="AjaxOnCompleteDisableButton" data-ajax="true" data-style="expand-left" class="btn ladda-button">
<span class="ladda-label">Sync iCal</span>
<span class="ladda-spinner"></span>
</a>

这里是js函数：

function AjaxOnCompleteDisableButton() {
    $("#icalSync").attr("disabled", true);
}

如果能提供任何帮助，我将不胜感激。

【问题讨论】：

由于 a 元素没有任何 disabled 属性，这将不起作用...将您的元素更改为 button、input 或添加 CSS 规则来模仿某些类的禁用状态...

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

disable 对锚标签无效，所以你可以试试这个：

 function AjaxOnCompleteDisableButton() {
event.preventDefault();
 }

或将您的 a#icalSync 更改为按钮并使用您的代码

<button id="icalSync" href="/iCal/iCalCreatedLinks" data-ajax-method="GET" data-ajax-complete="AjaxOnCompleteDisableButton" data-ajax="true" data-style="expand-left" class="btn ladda-button">
<span class="ladda-label">Sync iCal</span>
<span class="ladda-spinner"></span>
</button>

或者您可以添加禁用的类，在引导程序中使用：

function AjaxOnCompleteDisableButton() { $("#icalSync").addClass("disabled"); }

【讨论】：

问题是我使用 asp.net-MVC 并且 @Ajax.ActionLink 产生一个锚标签......所以我会做一个按钮。我希望我可以使用一些技术来节省我对 actionlink 方法的更改。
您可以通过添加“禁用”类在引导程序中将锚点设置为禁用。 ``function AjaxOnCompleteDisableButton() { $("#icalSync").addClass("disabled"); }
是的！这就是答案。如果您在答案中写下这个会很棒:)

【解决方案2】：

您的“按钮”并不是真正的按钮。你需要以不同的方式处理它。将其设为<button> 或在AjaxOnCompleteDisableButton 中为其分配一个类，使其看起来像已禁用（例如不透明度：0.5）并忽略其上的触发事件。

【讨论】：