How to disable a button depending on a checkbox’s state in AngularJS ? Last Updated : 27 Jul, 2021 Comments Improve Suggest changes 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 depending on a checkbox’s state in AngularJS ? 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 How to Disable a Button in React JS ? Disabling a button in React JS means making it unclickable and visually indicating its unavailability. This is done by setting the button's disabled attribute to true. It's used for controlled interactions, like form submissions with valid data.A disabled button becomes unclickable and visually sign 4 min read How to show a span element for each rows clicked in AngularJS ? In this article, we will see how to display a span element for each row clicked in AngularJS. A span element is used to group in-line elements in a document. It can be used to make a hook to a particular part of the document which may be subject to a particular action based on DOM events. The span e 4 min read How to directly update a field by using ng-click in AngularJS ? In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations. Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a 3 min read How to disable a form control in Angular ? In this article, we are going to see how to disable a form control in Angular 10. We will use AbstractControl disabled property to disable a form control element. Syntax: <formelement disabled></formelement> Return Value: boolean: returns boolean stating whether the element is disabled o 2 min read Like