How to enable the button only if one or more of the checkboxes are checked

sundaram080713 — Wed, 01 May 2024 16:20:33 GMT

i am working on a ServiceNow custom widget in which i am getting all the data from backed in an array. i want that if user doesn't checked any check boxes the next button should be disabled. if user checked any one of the boxes the next button should be enable please provide solution using ng-disable or ng-if if possible.

HTML.

Client Script

api.controller=function($scope, $uibModal , spUtil) { /* widget controller */ var c = this; var modal = null; c.onLoadSelectAllSPCheckBox = false; c.onLoadCategorySeelectAll = false; $scope.filteredSPItems = ''; $scope.categoryTemplate = false; c.productSearchTerm = ''; $scope.productSearch = {}; $scope.productSearch.name = ''; $scope.myFilter = function(item){ return item.flag == true; } c.searchFunction = function(){ $scope.productSearch.name = c.productSearchTerm; } c.startPreferences = function(){ c.editPreferences(); } c.editPreferences = function(){ modal = $uibModal.open({ scope: $scope, templateUrl: 'amd-notification-subscription-products', keyboard: true, backdrop: 'static', controller: function($scope) { } }); } c.closeTaskPopup = function(e) { if (e) { e.stopPropagation(); e.preventDefault(); } modal.dismiss({ $value: "dismiss" }); c.clearValue(); c.getOnLoadData(); } c.updateNotifications = function(){ $scope.loadingData = true; var data = $scope.data; data.action = 'update_products'; data.listSelectedSP = data.listSPAvailable; data.listSelectedCat = data.listCateAvailable; $scope.server.update().then(function(response) { c.closeTaskPopup(); c.clearValue(); spUtil.addInfoMessage(response.resp); $scope.loadingData = false; }); } c.toggleWindow = function(){ $scope.categoryTemplate = $scope.categoryTemplate ? false : true; $('.modal-body').scrollTop(0); } // Makes Widget Async $scope.data = $scope.options; $scope.loadingData = true; $scope.server.update().then(function() { $scope.loadingData = false; c.getOnLoadCategorySeelectAll(); c.toggleSPAll(); c.onToggleFlagSet(); }); c.clearValue = function(){ $scope.categoryTemplate = false; c.onLoadSelectAllSPCheckBox = false; c.productSearchTerm = ''; $scope.productSearch.name = ''; c.onLoadCategorySeelectAll = false; $scope.data.action = ""; c.getOnLoadCategorySeelectAll(); c.toggleSPAll(); c.onToggleFlagSet(); } c.selectAllProducts = function(){ if(c.onLoadSelectAllSPCheckBox){ for(var i=0; i < $scope.data.listSPAvailable.length; i++){ $scope.data.listSPAvailable[i].flag = true; } }else{ for(var j =0; j < $scope.data.listSPAvailable.length; j++){ $scope.data.listSPAvailable[j].flag = false; } } } c.toggleSPAll = function(){ var count = 0; for(var i in $scope.data.listSPAvailable){ if($scope.data.listSPAvailable[i].flag == true){ count++; } } c.onLoadSelectAllSPCheckBox = (count == $scope.data.listSPAvailable.length) ? true : false; } c.getOnLoadData = function(){ $scope.loadingData = true; var data = $scope.data; data.action = 'onLoad_data'; $scope.server.update().then(function(response) { c.clearValue(); $scope.loadingData = false; c.getOnLoadCategorySeelectAll(); c.toggleSPAll(); c.onToggleFlagSet(); }); } c.getOnLoadCategorySeelectAll = function(){ var count = 0; for(var i in c.data.listCateAvailable){ if(c.data.listCateAvailable[i].flag == true){ count++; } } c.onLoadCategorySeelectAll = (count == c.data.listCateAvailable.length) ? true : false; } c.toggleCateAll = function(){ if(c.onLoadCategorySeelectAll){ for(var i=0; i < $scope.data.listCateAvailable.length; i++){ $scope.data.listCateAvailable[i].flag = true; } }else{ for(var j =0; j < $scope.data.listCateAvailable.length; j++){ $scope.data.listCateAvailable[j].flag = false; } } } c.onLoadCTToggleAll = function(){ if(c.onLoadCategorySelectAllonHome){ for(var i=0; i < $scope.data.displayCateAvailable.length; i++){ $scope.data.displayCateAvailable[i].flag = true; } }else{ for(var j =0; j < $scope.data.displayCateAvailable.length; j++){ $scope.data.displayCateAvailable[j].flag = false; } } $scope.loadingData = true; var data = $scope.data; data.action = 'update_Selected_products'; data.listSelectedSP = data.listSPAvailable; data.listSelectedCat = data.displayCateAvailable; $scope.server.update().then(function(response) { c.clearValue(); spUtil.addInfoMessage(response.resp); $scope.loadingData = false; c.getOnLoadData(); }); } c.onLoadCTToggleSelected = function(cat){ $scope.loadingData = true; var data = $scope.data; data.action = 'update_Selected_products'; data.listSelectedSP = data.listSPAvailable; data.listSelectedCat = data.displayCateAvailable; $scope.server.update().then(function(response) { c.clearValue(); spUtil.addInfoMessage(response.resp); $scope.loadingData = false; c.getOnLoadData(); }); } c.onToggleFlagSet = function(){ var count = 0; for(var i in c.data.displayCateAvailable){ if(c.data.displayCateAvailable[i].flag == true){ count++; } } c.onLoadCategorySelectAllonHome = (count == c.data.displayCateAvailable.length) ? true : false; }

Server Side

i tried but i can only make the button disable when all the options are unchecked, i don't know how can i make button enable if one of the options are checked i added in

client Script:

$scope.submitDisabled = function() { var allChecked = $scope.c.onLoadSelectAllSPCheckBox return !allChecked; }

in HTML:

<div ng-if="!categoryTemplate"> <button class="btn btn-outline-primary" ng-click="c.closeTaskPopup($event)" > ${Cancel} </button> <button class="btn btn-primary" ng-disabled="submitDisabled() ng-click="c.toggleWindow()" > ${Next} </button> </div>

question How to enable the button only if one or more of the checkboxes are checked in Community Central forum

How to enable the button only if one or more of the checkboxes are checked