How to disable a button depending on a checkbox’s state in AngularJS ?

How to disable a button depending on a checkbox’s state in AngularJS ?

Last Updated : 27 Jul, 2021

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:

How to disable a button depending on a checkbox’s state in AngularJS ?

jimishravat2802

Improve

Article Tags :

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

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

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

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

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

How To Enable Button Based On If statement in ReactJS?

React.js is one of the most popular JavaScript libraries for building user interfaces, and one common task is enabling or disabling a button based on certain conditions or user inputs. This is often achieved by using conditional logic such as if statements.In this article, we'll explore how to enabl

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:

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

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

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