Enable a textfield on click of checkbox in angularjs

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
– Shashank Agrawal

2015-01-12 15:31:02 +00:00
Commented Jan 12, 2015 at 15:31 — Shashank Agrawal
– Shashank Agrawal, Commented Jan 12, 2015 at 15:31

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

1

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";

answered Jan 12, 2015 at 15:30

diogopontual

1531 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related