Disable button when nothing checked AngularJS

Question

I want to show button post only when modelCheck is checked, and disable when nothing is checked My code : HTML : HTML:

  <table>
  <tr>
    <th>name</th>
     <th><button class="btn" ng-if="(modelCheck | json) != ({} | json)" ng-click="post()">post</button></th>
      <th><button class="btn disabled" ng-if="(modelCheck | json) == ({} | json)" ng-click="post()">post</button></th>
  </tr>
  <tr ng-repeat="x in messages">
    <td>{{x.name}}</td>
    <td><input type="checkbox" ng-model="modelCheck[x.name]"/></td>
  </tr>
</table>

JS:

 $scope.modelCheck = {};

  $scope.messages = 
    [
        {
            "name": "eva",
        },
        {
            "name": "ben",
    },
 ];

$scope.post = function(){
    var data = [];
       for (var k in $scope.modelCheck) {
           if ($scope.modelCheck.hasOwnProperty(k) && $scope.modelCheck[k]) {
            data.push({'name': k});
           }
       }
       console.log(data);
       // do with data as you wish from here
    };

My plunker: http://next.plnkr.co/edit/FudqIFQ1Pe0Vfhvq

Thanks for answers and help in advance!

Madhan Varadhodiyil · Accepted Answer · 2018-08-08 07:39:37Z

1

You can use ng-disabled to do this.

<button class="btn"  ng-disabled="!isSelected()" ng-click="post()">post</button>

and in JavaScript :

$scope.isSelected = function() {
    var cnt = 0; 
    Object.keys($scope.modelCheck).forEach(function (e) {
        if ($scope.modelCheck[e]) {
            cnt +  = 1; 
        }
    }); 
    if (cnt > 0) {
        return true; 
    }
    else {
        return false; 
    }
}

Plunker demo . Hope this helps

answered Aug 8, 2018 at 7:39

Madhan Varadhodiyil

2,1061 gold badge16 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Disable button when nothing checked AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related