如果在Angular JS中未选中复选框，则禁用按钮 [英] Disable Button If Checkbox Is Unchecked In Angular JS

问题描述

所以我正在研究这个Web应用程序.我有一个类别列表，如果未选中列表中的某个项目，则将禁用保存"和发布"按钮.我知道 ng-disabled =！(ng-model名称)可以做到这一点，但是每次我加载页面时，按钮都是禁用的，但是当我检查一个项目时就不会启用列表.

So I'm working on this web application. I have a list of categories, where if an item on the list is not checked, the "Save"and "Publish"buttons would be disabled. I understand ng-disabled = !(ng-model name)would do just that, but each time, I load the page, the buttons are disabled, but do not get enabled when I check an item on the list.

<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);
        }
    }
}

推荐答案

更新:使小提琴更像实际情况.

UPDATE: made the fiddle more like the actual scenario.

将您的< a> 标记包装在按钮中，并在其上放置 ng-dissabled .

Wrap your <a> tag in a button and put the ng-dissabled on that.

这是一个演示如何执行此操作的jsfiddle: fiddle

Here's a jsfiddle that demonstrates how I would do this: 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();
}]);

这篇关于如果在Angular JS中未选中复选框，则禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！