2

Could anybody help me with a solution. I need to make the link disabled (PAY Now) after clicking on that to avoid multi clicking.

<div class="Class1" data-ng-show="ShowButton == 'TRUE'">
<a href="javascript:void(0);" data-ng-click="PayNow()" class="btn-register">PAY NOW</a></div>
0

4 Answers 4

2

There is no disabled attribute for hyperlinks. If you don't want to do something with that you'll need to add some style into the <a> tag altogether and handle the flag into the controller.

Try this :

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.isDisabled = false;
    if($scope.isDisabled === false) {
      $scope.PayNow = function() {
        $scope.isDisabled = true;
      }
    }
  }]);
.disabled {
  cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <a href="javascript:void(0)" ng-click="PayNow()" ng-class="{disabled: isDisabled}">PAY NOW</a>
</div>

Sign up to request clarification or add additional context in comments.

Comments

1

You can in the PayNow() function create an extra variable which disables the button like so:

JS:

$scope.PayNow = function() {
    $scope.DisabledButton = true;
    // other code 
}

HTML

<a href="javascript:void(0);" data-ng-click="PayNow()" class="btn-register" ng-disabled="DisabledButton">PAY NOW</a>

Comments

0

In your html

      .disabled {
          cursor: not-allowed;
        }

        <a ng-click="PayNow()" ng-class="{'disabled': DisabledButton}">Add</a>
OR

<button ng-click="PayNow()" ng-disabled="DisabledButton">Add</button>

In JS

$scope.DisabledButton = false;
$scope.PayNow = function() {
    $scope.DisabledButton = true;
    // other code 
    ...
    //when you want to re-enable
   $scope.DisabledButton = false;
}

Comments

0

i hope if this can help you!!!. So in my example I am using condition to check the length of the array and constraining the button to make more textboxes. Plus you can use count instead.

$scope.technologies = [];
    $scope.addtech = function () {
        $scope.minus = true;
        if ($scope.technologies.length < 3)
            $scope.technologies.push({});
    }

3 Comments

It would great if you can add some explanation so others can learn from it.
yeah sure. but even i need some help at this time
kishna bharda can you help if you know angularjs

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.