如何在单击后禁用提交按钮以防止在 Angularjs 中多次提交？答案

【问题标题】：How do you disable the submit button after a single click to prevent multiple submissions in Angularjs?如何在单击后禁用提交按钮以防止在 Angularjs 中多次提交？
【发布时间】：2015-07-11 03:36:11
【问题描述】：

我查看了整个网络，包括几个堆栈溢出示例，以找到问题的解决方案。具体来说，我试过这个：

var disableButton = function() {
  document.getElementById('<%= btnSubmit.ClientID %>').disabled = true;
}

$scope.isDisabled = false;
var someFunc = function() {
  $scope.isDisabled = true;
}

<button OnClientClick="disableButton()" type="submit">Submit</button>
<button ng-disabled="isDisabled" type="submit">Submit</button>

两者都没有像宣传的那样工作。还有其他建议吗？请仅提供 Angular 建议。谢谢。

【问题讨论】：

这是为了让按钮“禁用”还是只是为了阻止发送？您正在使用该角度功能禁用按钮，但您为什么不检查 !$scope.isDisabled 是否在您的其他功能上？
像这样修改你的 someFun $scope.someFun = function() {}
好看，$scope.someFun 是正确的方法，我试过了。但它并没有解决问题。
我希望按钮只提交一次。就这样。它调用 $scope.someFunc();完成后，应该可以多次提交。

标签： javascript html angularjs

【解决方案1】：

你非常接近答案。您唯一错过的是使用ng-click 在按钮上调用someFunc() 函数。

另一个问题是，在您的控制器中，函数应该是 $scope.someFunc() 而不是 var someFunc()

工作示例： 你的 index.html 应该是这样的：

<html>

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="application.js"></script>
  </head>

  <body ng-app="demo" ng-controller="demoController">
          <button type="submit" ng-disabled="isDisabled" ng-click="disableButton()"> Click me to disable myself</button>
  </body>

</html>

你的控制器 application.js 就像：

angular.module('demo', [])
    .controller('demoController',function($scope){

    $scope.isDisabled = false;

    $scope.disableButton = function() {
        $scope.isDisabled = true;
    }

    });

【讨论】：

是的，我试过了，我的提交（不是 ng-click）函数调用了我的函数，其中 $scope.isDisabled = true;位于函数内部的第一行，而 $scope.isDisabled = false 位于函数外部。我的按钮如上所示为提交。
好的。那么它有效吗？如果没有，您能否向我提供您的代码的有效plunker 链接，以便我们进行调查？
@rashadb 我已将上述代码更新为按钮类型为“提交”。我希望这会有所帮助。
这不会触发 asp.net 中的提交表单。
当按钮像这样被禁用时，角度属性 $submitted 变为 false，这可能会导致您出现问题，具体取决于实现。

【解决方案2】：

试试这个：

<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>

也有不同的方法来实现这个功能，你可以通过下面的链接，他们一定会有所帮助。

disabling all form controls between submit and server response

disable button on $http/$q calls

how to perform a check on ng-disabled

【讨论】：

在提问之前，我会查看所有这些内容。其中大多数对于我的用例来说有点太多了。我有一个包含三个输入和一个提交按钮的简单表单。大多数示例都带有 ng-click。我的按钮需要 type="submit"。
@rashadb AngularJS 主要用于单页应用程序，在这种情况下您不应该使用“提交”操作，而最好使用 Angular $http 处理通过 Ajax 提交的表单

【解决方案3】：

添加<input type="checkbox" ng-model="isDisabled">并在ng-disabled属性ng-disabled="isDisabled"中添加isDisabled，这样当你选择复选框按钮被禁用和取消选择复选框时，启用按钮。

请看链接http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview

【讨论】：

【解决方案4】：

也可以找到工作示例。

HTML

  <body ng-app="DisableButtonApp">
        <div ng-controller="MyAppCtrl">
            <button ng-click="someFunc()" ng-disabled="isDisabled" ng-model="isDisabled"type="submit">Submit</button>
        </div>
    </body>

JS：

angular.module('DisableButtonApp', [])
    .controller('MyAppCtrl',['$scope', function($scope){
    $scope.isDisabled = false;
    $scope.someFunc = function(){
        alert("Clicked!");
        $scope.isDisabled = true;
        return false;
    };
}]);

Demo

【讨论】：

【解决方案5】：

这是我为我的单一表单提交方案工作的答案：

$scope.increment = 0;
$scope.someFunc = function() {
     $scope.increment++
     if($scope.increment > 1) {
          return;
     } else {
          //do something else
   }
}

不需要指令或 HTML。

【讨论】：

【解决方案6】：

由于历史原因，如果类型不是“提交”，则单个（或）内部提交表单。

According to MDN，按钮可以有类型属性。

<button type="button">Your button</button>

使按钮没有默认行为。

Here是更详细的答案。

【讨论】：

【解决方案7】：

另一种方法是编写禁用提交按钮的指令

    angular.module('myApp').directive('clickedDisable', function(){
    return {
        restrict: 'A',
        link: function(scope, ele, attrs){
            $(ele).click(function(){
                $(ele).attr('disabled', true);
            });
        }
    };

在 HTML 中

    <button type="submit" clicked-disable></button>

【讨论】：

这里的$是什么？ jQuery？
从技术上讲它的 jqLite 除非你还加载 jquery，在这种情况下 jquery 实际上接管了 $。

【解决方案8】：

我不喜欢任何提供的答案，因为它们都使用 isDisabled 变量使全局范围变得混乱，为什么不这样做呢？

<button type="submit" ng-click="disableButton($event)">Submit</button>

.

$scope.disableButton = function($event) {
    $event.currentTarget.disabled = true;
};

如果您需要在禁用之前提交表单。

此代码未经测试

<form ng-submit="disableFormSubmitButton($event)">
    <button type="submit">Submit</button>
</form>

.

$scope.disableFormSubmitButton = function($event) {
    $($event).find('[type=submit]').prop('disabled',true);
};

【讨论】：

【解决方案9】：

对于它的价值，您可以直接在模板中执行此操作：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>

  <button ng-disabled="isDisabled" ng-click="isDisabled=true" type="submit">Submit</button> isDisabled={{isDisabled}}

</body>

【讨论】：

【解决方案10】：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
    <button type="submit" name="submit" class="btn btn-success" ng-disabled="isDisabled" ng-click="isDisabled=true">Hochladen</button> isDisabled={{isDisabled}}
</body>

【讨论】：