Disable Button If Checkbox Is Unchecked In Angular JS

Question

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 Code:

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

ng-disabled(disable attribute) doesn't work on anchor tag.. — Pankaj Parkar
– Pankaj Parkar, Commented Mar 31, 2017 at 13:57
You don't really "disable" an <a> element. Perhaps the logic in save() can check your condition and simply not perform its logic? — David
– David, Commented Mar 31, 2017 at 13:59

Daniel · Accepted Answer · 2017-04-03 15:41:42Z

2

UPDATE: made the fiddle more like the actual scenario.

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

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

edited Apr 3, 2017 at 15:41

answered Mar 31, 2017 at 14:59

Daniel

5434 silver badges13 bronze badges

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

6 Comments

Daniel Over a year ago

@gbade_ I added a fiddle and the code. See if this will work for you.

gbade_ Over a year ago

Hi @Daniel, I have even modified the code in jsfiddler to include a checkbox. It works in jsFiddler. The challenge is using that code with a list of checkbox items. The button stays disabled, but nothing happens when checked or unchecked

Daniel Over a year ago

What happens if you wrap it in a timeout? Also, do you have one save button for all of your categories, or does each category have its own save button?

gbade_ Over a year ago

Yes, one save button.The save button picks the selected items, and adds them to an array of objects. The list of checkboxes ought to ensure the user selects an item before saving.

gbade_ Over a year ago

Just did that. Once again. Thanks.

|

Collectives™ on Stack Overflow

Disable Button If Checkbox Is Unchecked In Angular JS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related