How can we make sure a checkbox is only checked when there is corresponding data inputted?

Question

How can we make sure a checkbox is only checked when there is corresponding data inputted?

I am facing an issue with my ng-repeater, where each row contains a checkbox and 3 text fields. I want to ensure that the user can only select the checkbox if they have entered data in all 3 text fields. If the user tries to select the checkbox without entering any data, I need to show a warning message.

I believe I need to check if the ng-models for the text fields are null or undefined before allowing the checkbox to be selected, but I'm not sure how to implement this in HTML.

This is a snippet of my HTML code:

<div ng-repeat="o in objects">
    <input type="checkbox" class="myClass" ng-click="doSomething(argument)>
    ....
    ....
    <input ng-model="model1">
    <input ng-model="model2">
    <input ng-model="model3">

EDIT: After some research, I found a solution on this Stack Overflow post about AngularJS form custom validation.

javascript angularjs twitter-bootstrap

Answer 1

Answer №1

To ensure all three text inputs have a value, you can disable them and use the ng-change directive to keep track.

Here is a sample HTML snippet:

<input type="text" ng-model="data.item3"  ng-change="update()"/>

<input type="checkbox" ng-model="data.model1" ng-disabled="checksDisabled"/>

Example of a controller:

.controller('MainCtrl',function($scope){
     $scope.checksDisabled=true;
     var data = $scope.data ={ };
     $scope.update=function(){
        $scope.checksDisabled = !(data.item1 && data.item2 && data.item3);
     }         
});

Check out the demo here!

Answer 2

To ensure all three text inputs have a value, you can disable them and use the ng-change directive to keep track.

Here is a sample HTML snippet:

<input type="text" ng-model="data.item3"  ng-change="update()"/>

<input type="checkbox" ng-model="data.model1" ng-disabled="checksDisabled"/>

Example of a controller:

.controller('MainCtrl',function($scope){
     $scope.checksDisabled=true;
     var data = $scope.data ={ };
     $scope.update=function(){
        $scope.checksDisabled = !(data.item1 && data.item2 && data.item3);
     }         
});

Check out the demo here!

How can we make sure a checkbox is only checked when there is corresponding data inputted?

Answer №1

Similar questions

Resulting from a factory, a resolved promise is making its way back

What is the best way to decrease the border width of a chartjs doughnut chart?

Attempting to grasp the correct method for understanding For loops

Position the table next to the textarea using HTML

Inserting line breaks in the data retrieved through AJAX

Run the setInterval function immediately on the first iteration without any delay

What is the best way to handle variables in javascript?

Monitoring the "signed in" status within an AngularJS platform

What is the best way to pass the value of a variable from a controller to a config function

Derive the property type based on the type of another property in TypeScript

Using Node.js to retrieve child processes associated with a daemon and terminate them

Error: Unable to locate module: Could not find '@/styles/globals.scss'

Troubleshooting: Issue with AngularJS Image onload directive - "this" reference not functioning properly?

Troubleshooting issues with JavaScript progress bar functionality

Can you confirm if this is the most efficient method for loading google-analytics and jQuery?

streamlined method for accessing page parameters in nested components using the next.js application router

Reorganizing data with JSON using JavaScript

Using an ng-repeat in AngularJS to filter items based on a route

Employ Mustache.js for displaying a series of data points retrieved from a JSON reply

Implementing conditional statements in Puppeteer web scraping