Javascript 如何在单击后禁用提交按钮以防止在 Angularjs 中多次提交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29984581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you disable the submit button after a single click to prevent multiple submissions in Angularjs?
提问by rashadb
I've looked all over the web including several stack overflow examples for a solution to the question. To be specific, I tried this:
我查看了整个网络，包括几个堆栈溢出示例以解决问题。具体来说，我试过这个：
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>Neither worked as advertised. Any other suggestions? Please Angular suggestions only. Thank you.
两者都没有像宣传的那样工作。还有其他建议吗？请仅提供 Angular 建议。谢谢你。
回答by Wahid Kadwaikar
You were very close to the answer. The only thing you missed out was calling the someFunc()function on button using ng-click.
你非常接近答案。您唯一错过的是someFunc()使用ng-click.
The other issue is, in your controller the function should be $scope.someFunc()and not var someFunc()
另一个问题是，在您的控制器中，函数应该是$scope.someFunc()而不是var someFunc()
Working example:Your index.html should be like:
工作示例：您的 index.html 应该是这样的：
<html>
<head>
<script data-require="[email protected]" 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>
And your controller application.js be like:
你的控制器 application.js 是这样的：
angular.module('demo', [])
.controller('demoController',function($scope){
$scope.isDisabled = false;
$scope.disableButton = function() {
$scope.isDisabled = true;
}
});
回答by Arun Ghosh
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
在 HTML 中
<button type="submit" clicked-disable></button>
回答by Timo Huovinen
I didn't like any of the provided answers as they all clutter the global scope with the isDisabledvariable, why not do it this way instead?
我不喜欢任何提供的答案，因为它们都用isDisabled变量混淆了全局范围，为什么不这样做呢？
<button type="submit" ng-click="disableButton($event)">Submit</button>
.
.
$scope.disableButton = function($event) {
$event.currentTarget.disabled = true;
};
if if you need to submit a form before the disable.
如果您需要在禁用之前提交表单。
this code is not tested
此代码未经测试
<form ng-submit="disableFormSubmitButton($event)">
<button type="submit">Submit</button>
</form>
.
.
$scope.disableFormSubmitButton = function($event) {
$($event).find('[type=submit]').prop('disabled',true);
};
回答by VikrantMore
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
回答by Ranga Reddy
Find the working example also.
还可以找到工作示例。
HTML
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:
JS：
angular.module('DisableButtonApp', [])
.controller('MyAppCtrl',['$scope', function($scope){
$scope.isDisabled = false;
$scope.someFunc = function(){
alert("Clicked!");
$scope.isDisabled = true;
return false;
};
}]);
回答by fwiw
For what it's worth, you can do that directly in the template:
对于它的价值，您可以直接在模板中执行此操作：
<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>回答by rashadb
Here is the answer I got to work for my single form submission scenario:
这是我为我的单一表单提交场景工作的答案：
$scope.increment = 0;
$scope.someFunc = function() {
$scope.increment++
if($scope.increment > 1) {
return;
} else {
//do something else
}
}
No directives or HTMl necessary.
不需要指令或 HTMl。
回答by irsick
Because of historical reasons single (or ) inside submits form if type is not 'submit'.
由于历史原因，如果类型不是“提交”，则单个（或）内部提交表单。
According to MDN, button can may have type attribute.
根据 MDN，按钮可以具有 type 属性。
<button type="button">Your button</button>
makes button have no default behavior.
使按钮没有默认行为。
Hereis more detailed answer.
这里有更详细的答案。
回答by Sanjay Parmar
Add <input type="checkbox" ng-model="isDisabled">and add isDisabledin ng-disabled attribute ng-disabled="isDisabled", so when you select checkbox button is disabled and deselect checkbox, enable button.
在 ng-disabled 属性中添加<input type="checkbox" ng-model="isDisabled">和添加isDisabledng-disabled="isDisabled"，因此当您选择复选框按钮被禁用并取消选择复选框时，启用按钮。
Please see link http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview
回答by Sarius
<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>
