Question

我已经浏览了整个网络，包括几个堆栈溢出示例，以解决问题。具体来说，我试过这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你非常接近答案。您唯一遗漏的是使用someFunc()调用按钮上的ng-click功能。

另一个问题是，在您的控制器中，该功能应为$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;
    }

    });

Answer 2

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

    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>

Answer 3

我不喜欢任何提供的答案，因为它们会使用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);
};

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

此外，有不同的方法来实现此功能，您可以通过以下链接，他们肯定会有所帮助。

disabling all form controls between submit and server response

disable button on $http/$q calls

how to perform a check on ng-disabled

Answer 5

也找到了工作示例。

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

Answer 6

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

＆＃13;

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

＆＃13;

Answer 7

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

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

无需指令或HTMl。

Answer 8

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

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

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

make按钮没有默认行为。

Here是更详细的答案。

Answer 9

添加#import "NSString+DES.h" @implementation NSString(DES) - (NSString*) encryptDES: (NSString *) key { NSData *keyData = [key dataUsingEncoding:NSUTF8StringEncoding]; NSData *stringData = [self dataUsingEncoding:NSUTF8StringEncoding]; size_t numBytesEncrypted = 0; size_t bufferSize = stringData.length + kCCBlockSizeDES; void *buffer = malloc(bufferSize); CCCryptorStatus result = CCCrypt( kCCEncrypt, kCCAlgorithmDES, kCCOptionPKCS7Padding, keyData.bytes, kCCKeySizeDES, NULL, stringData.bytes, stringData.length, buffer, bufferSize, &numBytesEncrypted); NSData *output = [NSData dataWithBytes:buffer length:numBytesEncrypted]; free(buffer); if( result == kCCSuccess ) { NSString *resultStr = [output base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength]; return resultStr; } else { NSLog(@"Failed DES encrypt..."); return nil; } } - (NSString *) decryptDES: (NSString *) key { NSData *keyData = [key dataUsingEncoding:NSUTF8StringEncoding]; NSData *stringData = [[NSData alloc] initWithBase64EncodedString:self options:0]; size_t numBytesEncrypted = 0; size_t bufferSize = stringData.length + kCCBlockSizeDES; void *buffer = malloc(bufferSize); CCCryptorStatus result = CCCrypt( kCCDecrypt, kCCAlgorithmDES, kCCOptionPKCS7Padding, keyData.bytes, kCCKeySizeDES, NULL, stringData.bytes, stringData.length, buffer, bufferSize, &numBytesEncrypted); NSData *output = [NSData dataWithBytes:buffer length:numBytesEncrypted]; free(buffer); if( result == kCCSuccess ) { NSString *resultStr = [output base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength]; return resultStr; } else { NSLog(@"Failed DES decrypt..."); return nil; } } @end并在ng-disabled属性<input type="checkbox" ng-model="isDisabled">中添加 isDisabled ，因此当您选中复选框按钮并取消选中复选框时，启用按钮。

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

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

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

10 个答案: