HiI have one checkbox if i have checked that then enable Name else disablecould you please help melthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap336cssbootstrapmincss34 gt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs148angularminjs34gtltscriptgt ltscript type34t

Hi mahesh213Refer below sampleHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs148angularminjs34gtltscriptgt ltscript type34textjavascript34gt var app angularmodule34myApp34 appcontroller34myCtrl34 function scope http scopeemployees Active 0 Active 1 for var i 0 i lt scopeemployeeslength i scopeemployeesiActive scopeemployeesiActive 1 true false scopeEnableDisable function emp index scopeemployeesindexActive empActive ltscriptgtltheadgtltbody ngapp34myApp34 ngcontroller34myCtrl34gt lttable class34table tablebordered tablehover34gt

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

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Feb 20, 2020 01:21 AM
Forum: AngularJS
Answer: 1
Views: 12380
Sample Code: Download

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>

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Feb 20, 2020 02:11 AM
Report

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

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

Company

Explore

Follow us

Contact Us