禁用按鈕如果複選框未選中角JS中

Question

所以我正在處理這個Web應用程序。我有一個類別列表，如果列表中的項目未被選中，則「保存」和「發佈」按鈕將被禁用。我明白ng-disabled = !(ng-model name)會做到這一點，但每一次，我加載頁面，按鈕被禁用，但是當我檢查列表上的項目時不啓用。

<a ng-if="status() < 2" href="#" data-ng-click="publish(true)" class="btn btn-sm btn-block btn-success" ng-disabled="!cat.IsSelected">{{lbl.publish}}</a> 
<a ng-if="status() == 2" href="#" data-ng-click="save()" class="btn btn-sm btn-block btn-primary" id="check_box" ng-disabled="!cat.IsSelected"> 
{{lbl.save}} 
</a>      
<span ng-if="status() < 2"> 
    <a href="#" ng-click="save()" class="btn btn-sm btn-block btn-primary" id="check_box" ng-disabled="!cat.IsSelected"> 
    {{lbl.save}} 
    </a> 
</span> 

<ul class="categories-list"> 
    <li ng-repeat="cat in lookups.CategoryList"> 
     <label><input type="checkbox" id="cat-{{cat.OptionValue}}" data-ng-model="cat.IsSelected"/> {{cat.OptionName}}</label> 
    </li> 
    <li ng-if="lookups.CategoryList.length == 0" class="item-empty">{{lbl.empty}}</li> 
</ul> 

JS代碼：

$scope.post.Categories = []; 
if ($scope.lookups.CategoryList != null) { 
    for (var i = 0; i < $scope.lookups.CategoryList.length; i++) { 
     var cat = $scope.lookups.CategoryList[i]; 
     if (cat.IsSelected) { 
      var catAdd = { "IsChecked": false, "Id": cat.OptionValue, "Title": cat.OptionName }; 
      $scope.post.Categories.push(catAdd); 
     } 
    } 
} 

Answer 1

UPDATE：作出的小提琴更像是實際情況。

將您的<a>標籤包裝在一個按鈕中，並將其放在ng-dissabled上。

這裏有一個的jsfiddle演示我會怎麼做：fiddle

<div ng-app="test" ng-controller="myController"> 
    <button ng-click="save()" ng-disabled="!hasSelectedAnItem" class="btn btn-sm btn-block btn-primary"> 
    Save 
    </button> 
    <ul class="categories-list"> 
     <li ng-repeat="cat in items"> 
      <label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected" ng-change="canBeSaved()"/> {{cat.OptionName}}</label> 
     </li> 
    </ul> 
</div> 

JS：

angular.module('test', []) 

.controller('myController', ['$scope', function($scope) { 
    $scope.hasSelectedAnItem = false; 

    $scope.items = [ 
     {OptionValue: 123, OptionName: "Adam", IsSelected: true}, 
     {OptionValue: 234, OptionName: "Paul", IsSelected: false}, 
      {OptionValue: 345, OptionName: "Jason", IsSelected: true},   
     {OptionValue: 464, OptionName: "Joe", IsSelected: false} 
    ]; 

    $scope.canBeSaved = function() { 

     var found = false; 
     $scope.items.forEach(function(item) { 
     if (item.IsSelected) { 
      alert("Here"); 
      found = true; 
     } 
     }); 

     $scope.hasSelectedAnItem = found; 
    } 

    $scope.save = function() { 
     alert($scope.cat.IsSelected); 
    } 

    $scope.canBeSaved(); 
}]);