How do you disable the submit button after a single click to prevent multiple submissions in Angularjs?

前端未结

关注

 10  1999

I\'ve looked all over the web including several stack overflow examples for a solution to the question. To be specific, I tried this:

相关标签:

10条回答

悲哀的现实

2020-12-23 15:03

Add <input type="checkbox" ng-model="isDisabled"> and add isDisabled in ng-disabled attribute ng-disabled="isDisabled" , so when you select checkbox button is disabled and deselect checkbox, enable button.

Please see link http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview

0 讨论(0)
发布评论:

提交评论
- 加载中...

孤独总比滥情好

2020-12-23 15:07

Another way is to write a directive which disables the submit button

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

And in the HTML

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

0 讨论(0)

渐次进展

2020-12-23 15:07
Try using this:
```
<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>
```
Also there are different approaches to achieve this functionality, you can go through following links, they will surely help.

disabling all form controls between submit and server response

disable button on $http/$q calls

how to perform a check on ng-disabled
0 讨论(0)
发布评论:

提交评论
- 加载中...

生来不讨喜

2020-12-23 15:07

Find the working example also.

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

0 讨论(0)

上一页 1 2

热议问题