How to disable a button depending on a checkbox’s state in AngularJS ? Last Updated : 27 Jul, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will learn to disable the button depending upon the check-box status in Angular. We will use the Angular JS directive named ng-disabled to disable the button by unchecking the box. Please refer to AngularJS ng-disabled Directive. The ng-disabled directive is used to enable or disable the HTML elements. If the expression inside the ng-disabled directive returns true then the HTML element would be disabled and vice versa. Approach: Here in the example, we have taken a checkbox and based on the checkbox, we are checking that whether the submit button is to be enabled or disabled. Here ng-model directive is used for binding the checkbox with the submit button & the ng-disabled directive is to handle the disable or enable operations. Here if the checkbox is checked it will return TRUE and that TRUE will be passed to the ng-disabled directive. As a result, the submit button would be disabled but we need to enable it whenever the checkbox is checked. So for that, we need to have a NOT operation at the ng-disabled directive so that whenever the checkbox returns TRUE, the value that will go to the ng-disabled directive will be FALSE so that the submit button is enabled. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <!-- Including the Angular JS CDN --> <script src= "http://code.angularjs.org/1.2.0/angular.min.js"> </script> </head> <body> <!-- Defining the Angular Application --> <div ng-app=""> <!-- Here we define the ng-model to the checkbox so that we can refer to it whether it checked or not --> <input type="checkbox" name="isAgreed" ng-model="isAgreed" /> <p>I agree with the Terms and Conditions</p> <br /> <!-- If the checkbox is checked then button would be enabled and if not checked then button would be disabled --> <button ng-disabled="!isAgreed">Submit</button> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Disable a Button Conditionally in JavaScript? J jimishravat2802 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to set checkbox checked on button click in AngularJS? In this article, we will see how to set checkboxes checked with the click of a button in AngularJS. Approach: The approach is to use the ng-checked directive to check the checkbox in the DOM. In the first example, a single checkbox is checked by the button and In the second example, multiple checkbo 2 min read How to hide an HTML element via a button click in AngularJS ? In this article, we will see how to use a toggle button feature to hide and display an element by button click in Angular. The toggle button is a user interface control that may be useful for situations when the user wants to switch between 2 states or conditions. For instance, in our smartphone, we 2 min read How to set radio button checked by button click in AngularJS ? In this article, we will see how to set the radio button checked by button click in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the ng-checked directive to check the radio button in the DOM. In the first example, a single radio button is ch 2 min read How to change the button color after clicking it using AngularJS ? Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked. Here, t 2 min read How to Disable a Button Conditionally in JavaScript? In JavaScript, you can conditionally disable buttons based on specific criteria to control user interactions. Using simple if-else statements or event listeners, you can dynamically enable or disable buttons depending on form validation, user actions, or other conditions. This helps regulate the ava 3 min read How to disable buttons using AngularJS ? In this article, we will see how to disable the button using the particular directive in AngularJS. Sometimes, we need to disable the button, and link on the click event. This task can be accomplished by implementing the ng-disabled directive that is used to enable or disable HTML elements. Syntax: 2 min read Like