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

Question

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

32

我已经在网上搜寻了很多内容，包括一些stackoverflow的例子，以找到解决问题的方法。具体来说，我尝试了以下方法：

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 相关的建议。谢谢。

- rashadb

这是为了让按钮“禁用”还是仅仅防止发送？你正在使用那个Angular函数使按钮变为禁用状态，但为什么不在其他函数中检查一下$scope.isDisabled是否为false呢？ - Jake Rowsell

修改您的 someFun 如下 $scope.someFun = function() {} - Ranga Reddy

好的，$scope.someFun 是正确的方式，我已经尝试过了。然而，它并没有解决问题。 - rashadb

我希望按钮只能提交一次。这就是全部。它调用 $scope.someFunc(); 一次完成后，应该能够多次提交。 - rashadb

10个回答

12

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

    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>

- Arun Ghosh

这里的 $ 是什么？Jquery吗？ - uylmz

1

从技术上讲，除非您还加载了jQuery，否则它是jqLite，如果加载了jQuery，则jQuery实际上接管了$。 - Brandon

6

我不喜欢提供的答案，因为它们都会在全局范围内混乱使用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);
};

- Timo Huovinen

4

尝试使用这个：

<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>

此功能有不同的实现方法，您可以查看以下链接，它们肯定会有所帮助。禁用提交和服务器响应之间的所有表单控件在 $http/$q 调用期间禁用按钮如何对 ng-disabled 进行检查

- VikrantMore

在提问之前，我查看了所有这些内容。其中大多数对我的用例来说有点过于复杂了。我有一个简单的表单，包含三个输入和一个提交按钮。大多数示例都带有ng-click。但是我需要type="submit"来定义我的按钮。 - rashadb

2

AngularJS主要用于单页应用程序，在这种情况下，您不应使用“提交”操作，最好使用Angular $http通过Ajax处理表单提交。 - Jiju Thomas Mathew

1

找到工作示例也可以。

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

的英译中，保留了HTML格式，不做解释。

- Ranga Reddy

1

就我所知，您可以直接在模板中完成此操作：

<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>

- fwiw

0

这是我得到的答案，适用于我的单表单提交场景：

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

不需要指令或HTML。

- rashadb

0

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

根据MDN的说法，按钮可以具有类型属性。

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

使按钮没有默认行为。

这里有更详细的答案。

- irsick

-1

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

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

- Sanjay Parmar

-1

<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>

- Sarius

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wahid Kadwaikar · Accepted Answer

你离答案很接近了，你唯一错过的是在按钮上使用 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;
    }

    });