ng- disabled directive is used to enable or disable HTML elements. Let us see this with the help of an example.

Write the following HTML mark up in the webpage.

  1. <!doctype html>
  2. <html ng-app>
  3. <head>
  4. <title>My Angular App</title>
  5. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  6. </head>
  7. <body>
  8. <div ng-app="" ng-init="Switch=true">
  10. <p>
  11. <input type="checkbox" ng-model="Switch"/>
  12. </p>
  13. <p>
  14. <button ng-disabled="Switch">Submit</button>
  15. </p>
  17. </div>
  18. </body>
  19. </html>
In the above example we have a checkbox and a button. If the checkbox is selected the button is disabled, but if we uncheck the checkbox then the button is enabled.

So let us check the output of the program.

output
When we select the checkbox let us see what happens!!
output
So the button is disabled. In this way we can enable or disable a control in AngularJS.