在angularJS中单击后禁用提交按钮答案

【问题标题】：Disable submit button after one click in angularJS在angularJS中单击后禁用提交按钮
【发布时间】：2016-12-01 18:56:09
【问题描述】：

我想一键禁用按钮。

代码：

<button id="submitRequest" class="btn btn-primary btn-active"
        ng-disabled="!frmRequest.$valid||!r.DataUseAgreement||(!chkBMT&&!chkOncore&&!chkCAISIS&&!chkLIMS&&!chkFCR)"
        ng-click="SaveData()">
  <i class="fa fa-save"></i> Submit
</button>

如何一键关闭此功能？

谢谢！

【问题讨论】：

你是什么意思一键？
所有输入、复选框和选择都需要添加

标签： angularjs button angularjs-ng-disabled

【解决方案1】：

这很简单。您只需在 ng-disable 语句中再添加一个布尔条件。

 <button class="btn btn-info" ng-click="ctrl.isSubmit()" ng-disabled="ctrl.submitClicked">Submit</button>

在你的控制器中

var vm=this;
vm.submitClicked=false;

vm.isSubmit= function(){
vm.submitClicked= true;
}

这是我为你制作的Plunker

【讨论】：

【解决方案2】：

一键禁用按钮

<input type="submit" name="Submit" class="btn btn-primary"
value="Submit" ng-disabled="button.disabled"/>

在Controller中，你提交表单的地方只需添加

scope.button={};
scope.button.disabled=true;

这会在单击表单提交后禁用按钮

【讨论】：

【解决方案3】：

在您的 SaveData() 函数中，在函数开头添加以下行：

$scope.saving=true;

然后，在您的 ng-disabled 条件下，添加其他条件：

saving||!frmRequest.$valid||!r.DataUseAgreement||(!chkBMT&&!chkOncore&&!chkCAISIS&&!chkLIMS&&!chkFCR)

【讨论】：

【解决方案4】：

简单。你给元素写一点 javascript，比如 onclick="this.disabled=true" 。

&lt;button id="submitRequest" onclick="this.disabled=true" class="btn btn-primary btn-active" ng-disabled="!frmRequest.$valid||!r.DataUseAgreement||(!chkBMT&amp;&amp;!chkOncore&amp;&amp;!chkCAISIS&amp;&amp;!chkLIMS&amp;&amp;!chkFCR)" ng-click="SaveData()"&gt;&lt;i class="fa fa-save"&gt;&lt;/i&gt; Submit&lt;/button&gt;

【讨论】：

这将禁用按钮一次单击，但它也不允许第一次单击时提交表单。