Enable Disable TextBoxes based on RadioButton selection in AngularJS

Last Reply 8 months ago By dharmendr

Posted 8 months ago

Hi,

I have one form with fields Radio button,text1 and text2

by deafult i need to disable text1 ,text2 and select check no option in radio button

if we can check Yes button then i need to enable text1 and text2

could you please help me

@{ 
    Layout = null;
}
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",  ['angularUtils.directives.dirPagination']);

        app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {

        }]);
    </script>
</head>
<body>
    <div id="wrapper" class="clearfix">
            <form name="userForm" novalidate>

                <div class="form-horizontal">
                    <div class="row">
                        <div class="col-md-3" style="margin-top:5px;">
                            <label for="CAL_IsApproved">Radio Button</label><br />
                            <input type="radio" name="CAL_IsApproved" ng-model="Radiobutton" ng-value="1"> Yes
                            <input type="radio" name="CAL_IsApproved" ng-model="Radiobutton" ng-value="0"checked > No<br>
                        </div>      
                        <div class="col-md-3">
                            <label for="UserName">Text1</label>
                            <input type="text" class="form-control" ng-model="Text1" />
                        </div>
                        <div class="col-md-3">
                            <label for="Password">Text2</label>
                            <input type="text" class="form-control"  ng-model="Text2" />
                        </div>
                    </div>
                    <div></div>
                </div>
            </form>
        </div>

</body>
</html>

 

Posted 8 months ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
            $scope.Checked = 2;
            $scope.Disabled = true;
            $scope.Enable = function (ele) {
                $scope.Disabled = ele == 1 ? false : true;
            }
        } ]);
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div id="wrapper" class="clearfix">
        <form name="userForm" novalidate>
        <div class="form-horizontal">
            <div class="row">
                <div class="col-md-3" style="margin-top: 5px;">
                    <label for="CAL_IsApproved">
                        Radio Button</label><br />
                    <input type="radio" name="CAL_IsApproved" ng-model="Radiobutton" ng-value="1" ng-checked="Checked == 1"
                        ng-click="Enable(1)" />
                    Yes
                    <input type="radio" name="CAL_IsApproved" ng-model="Radiobutton" ng-value="0" ng-checked="Checked == 2"
                        ng-click="Enable(2)" />
                    No<br />
                </div>
                <div class="col-md-3">
                    <label for="UserName">
                        Text1</label>
                    <input type="text" class="form-control" ng-model="Text1" ng-disabled="Disabled" />
                </div>
                <div class="col-md-3">
                    <label for="Password">
                        Text2</label>
                    <input type="text" class="form-control" ng-model="Text2" ng-disabled="Disabled" />
                </div>
            </div>
        </div>
        </form>
    </div>
</body>
</html>

Demo