Enable a textfield on click of checkbox in angularjs

Name: Enable a textfield on click of checkbox in angularjs - Stack Overflow
Rating: 4.8 (1708 reviews)

Question

I am very new to angularjs, i will brief you out what i should achieve

there are three items in a web page, (i) Checkbox (ii) Textbox 1 (iii) Textbox 2
Textbox 1 is always read only with some text in it
on clicking the checkbox, textbox 2 should be editable which is intially readonly and has the text same as that in textbox 1

I have to do it in angularjs

please help

Have you tried anything?
– Shashank Agrawal
CommentedJan 12, 2015 at 15:31 — Shashank Agrawal, CommentedJan 12, 2015 at 15:31

diogopontual · Accepted Answer · 2015-01-12 15:30:00Z

since you have the application and the controller, you can do:

Bind the checkbox to a variable doing: <input type="checkbox" ng-model="checked">;
Now your $scope have a property called checked. When the checkbox is checked, $scope.checked value will be true.
On your text fields write ng-readonly="checked";

Shashank Agrawal · Accepted Answer · 2015-01-12 16:00:00Z

Here you go:

HTML file:

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script> <script src="app.js"></script> </head> <body ng-controller="MyController"> <input type="checkbox" ng-model="myCheckbox" ng-change="cbSelected()" /> <input type="text" ng-model="text1" readonly /> <input type="text" ng-model="text2" ng-readonly="!myCheckbox" /> </body> </html>

JS file:

'use strict'; angular.module('myApp', []) .controller('MyController', function($scope) { $scope.text1 = 'some-text'; $scope.cbSelected = function() { if ($scope.myCheckbox) { // when checked $scope.text2 = angular.copy($scope.text1); } else { $scope.text2 = ""; } }; });

See it working here: http://plnkr.co/edit/vURMjLxArLsRSKZj5o9q?p=preview

Ask question & read documentation if have any doubts.

Collectives™ on Stack Overflow

Enable a textfield on click of checkbox in angularjs

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related