Enable Disable TextBox in Table row based on CheckBox Checked Unchecked in AngularJS

mahesh213
 
on Feb 20, 2020 01:21 AM
Sample_167230.zip
3610 Views

Hi,

I have one checkbox if i have checked that then enable Name else disable

could you please help me

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {
            $scope.employees = [{ Active: 0 }];
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Active</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td><input type="checkbox" ng-model="employee.Active" /> </td>
                <td><input type="text" ng-model="employee.Name" /></td>
            </tr>
          
        </tbody>
    </table>
</body>
</html>
Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 20, 2020 02:11 AM

Hi mahesh213,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {
            $scope.employees = [{ Active: 0 }, { Active: 1}];
            for (var i = 0; i < $scope.employees.length; i++) {
                $scope.employees[i].Active = $scope.employees[i].Active == 1 ? true : false;
            }
            $scope.EnableDisable = function (emp, index) {
                $scope.employees[index].Active = emp.Active;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Active</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td><input type="checkbox" ng-model="employee.Active" ng-change="EnableDisable(employee,$index)" /></td>
                <td><input type="text" ng-model="employee.Name" ng-disabled="!employee.Active" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Demo