Angularjs checkbox checked enables input field

Question

I'm kinda new in AngularJS and my issue is:

I have a loop like this:

 <body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <input type="checkbox" ng-repeat="btn in btns" class="here" value="{{btn.value}}">

        <input type="text" class="uncheck" disabled>
    </div>
</body>

One of those checkboxes has a value of "OTHER", and what I need to do is: when the checkbox with the "OTHER" value is checked it remove the disabled attribute from the <input type="text" class="uncheck" disabled>

This is my controller:

angular.module('ngToggle', [])
    .controller('AppCtrl',['$scope', function($scope){
        $scope.btns = [
        {value:'one'},
        {value:'two'},
        {value:'other'}
        ];
}]);

Hope someone can help me, Thanks.

fyi the "ng" prefix for controllers is conventionally used by stuff that is provided by angularjs by default. Best to not use it in custom components. — jrharshath
– jrharshath, Commented Jun 6, 2016 at 5:07

Rayon · Accepted Answer · 2016-06-06 04:57:03Z

2

Use ng-change directive and test value of other checkbox in forEach-loop

angular.module('ngToggle', [])
  .controller('AppCtrl', ['$scope',
    function($scope) {
      $scope.disabled = true;
      $scope.btns = [{
        value: 'one'
      }, {
        value: 'two'
      }, {
        value: 'other'
      }];
      $scope.onChange = function() {
        $scope.btns.forEach(function(btn) {
          if (btn.value === 'other' && btn.status === true) {
            $scope.disabled = false;
          } else {
            $scope.disabled = true;
          }
        });
      }
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="ngToggle">
  <div ng-controller="AppCtrl">
    <input type="checkbox" ng-repeat="btn in btns" class="here" ng-model='btn.status' ng-change='onChange()'>

    <input type="text" class="uncheck" ng-disabled='disabled'>
  </div>
</body>

answered Jun 6, 2016 at 4:57

Rayon

36.6k5 gold badges53 silver badges78 bronze badges

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

1 Comment

Ruben R. Over a year ago

Hi @rayon thanks for the answer, this work great, base on your answer i manage to make it work, but now lets say we have several checkboxes loops followed by an input field, and every time the "other" checkbox is checked it will enable the followed input field, please check my next question link, Thanks.

Hadi · Accepted Answer · 2016-06-06 05:05:46Z

try like this.

angular.module('ngToggle', [])
    .controller('AppCtrl',['$scope', function($scope){
        $scope.btns = [
        {value:'one',name:"one"},
        {value:'two',name:'two'},
        {value:'other',name:'other'}
        ];
      
       $scope.disable=true;
      
      $scope.check = function(value){
        if(value == "'other'")
          $scope.disable = false;
        else
           $scope.disable=true;
      }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ngToggle">
    <div ng-controller="AppCtrl">
      <div  ng-repeat="btn in btns">
        <input type="checkbox" ng-model="btn.value" ng-true-value="'{{btn.value}}'" ng-change="check(btn.value)" >{{btn.name}}
      </div>
        <input type="text" class="uncheck" ng-disabled='disable'>
    </div>
</div>

Dean Christian Armada · Accepted Answer · 2016-06-06 05:06:43Z

Make use of ng-models. Please avoild using "values attribute" as well in AngularJS. The alternative for values is "ng-init". Well anyway, here is a working code:

<!DOCTYPE html>
<html >

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <p ng-repeat="btn in btns">
          <input type="checkbox" ng-model="btn.bool" value="ss"  class="here" > {{ btn.value }}
        </p>
        <input type="text" ng-model="textModel" class="uncheck" ng-disabled="other.bool">
        <p>{{ other.bool  }} -- {{textModel  }}</p> 
    </div>
    <script type="text/javascript">
        angular.module('ngToggle', [])
            .controller('AppCtrl',['$scope', function($scope){
                $scope.btns = [
                {value:'one', bool:false},
                {value:'two', bool:true},
                {value:'other', bool:true}
                ];
                $scope.otherBool = $scope.btns[2]['bool'];
                $scope.btns.map(function(obj){
                  //alert(JSON.stringify(obj))
                  if((obj.value) == 'other'){
                    $scope.other = obj;
                  }
                });
        }]);
    </script>
  </body>
</html>

YOu can check it in plunker as well: http://plnkr.co/edit/GODfWbhlWvzjLKHFcEYs?p=preview

Collectives™ on Stack Overflow

Angularjs checkbox checked enables input field

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related