CODEWITHSUNDEEP
javascriptjqueryangularjscheckboxangularjs-ng-disabled
Ruben R.
Ruben R.

Reputation: 92

Angularjs checkbox checked enables input field

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.

Upvotes: 0

Views: 4190

Answers (3)

Dean Christian Armada
Dean Christian Armada

Reputation: 7384

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

Upvotes: 0

Hadi
Hadi

Reputation: 17299

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>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

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>

Upvotes: 2

Related Questions