ng-Disabled Directive in AngularJS

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=""></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.

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


Next Recommended Reading ng-init Directive in AngularJS