Check atleast one checkbox on selecting checkbox - AngularJS

Question

I have two checkboxes on my page. On selecting first checkbox, a list of checkboxes will be diaplyed. Check at least one of them to get submit button enabled

<div class="row">
    <div class="col-md-2">
        <label><input type="checkbox" ng-model="CheckAllTrials" />&nbsp;Check All</label>
    </div>
    <div class="col-md-5">
        <input type="text" ng-model="searchByTrialNumber" class="form-control" placeholder="search trial number">
    </div>
    <div class="row">
        <div class="col-md-12">
            <label class="normal">
                <input type="checkbox" ng-model="chkOncore" id="chkOncore" ng-required="isOptionsRequired()" /> 
                ONCORE
            </label>
        </div>
    </div>
    <div class="row" ng-show="chkOncore" id="divOnCore" style="background-color:#eee;border:1px dotted #ccc;margin:2px;padding:4px;">
        <div class="row">
            <div class="col-md-12 ">
                <label>Check CTO Managed Trials/Protocols</label>
                <div class="row">
                    <div class="col-md-2">
                        <label><input type="checkbox" ng-model="CheckAllTrials" />&nbsp;Check All</label>
                        <div class="row">
                            <div class="col-md-2">
                                <label><input type="checkbox" ng-model="CheckAllTrials" />&nbsp;Check All</label>
                            </div>
                            <div class="col-md-5">
                                <input type="text" ng-model="searchByTrialNumber" class="form-control" placeholder="search trial number">
                                <div class="col-md-5">
                                    <input type="text" ng-model="searchByTrialName" class="form-control" placeholder="search trial title">
                                </div>
                            </div>
                            <div class="well" style="max-height:400px;overflow-y:auto;">
                                <div ng-repeat="item in oncoreTrials|filter:{protocol_nbr:searchByTrialNumber,protocol_long_title:searchByTrialName}">
                                    <label class="normal">
                                        <input type="checkbox" ng-click="UpdateOncoreTrials(item.protocol_nbr)" value="{{item.protocol_nbr}}" ng-checked="CheckAllTrials">[{{item.protocol_nbr}}]-{{item.protocol_long_title}}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 ">
                            <label>Check CTO Management Groups</label>
                            <div class="well" style="max-height:400px;overflow-y:auto;">
                                <div class="row">
                                    <div class="col-md-2">
                                        <label><input type="checkbox" ng-model="CheckAllGroups" />&nbsp;Check All</label>
                                    </div>
                                    <div class="col-md-10">
                                        <input type="text" ng-model="searchByGroupName" class="form-control" placeholder="search group">
                                    </div>
                                </div>
                                <div ng-repeat="item in oncoreGroups|filter:{name:searchByGroupName}">
                                    <label class="normal">
                                        <input type="checkbox" ng-click="UpdateOncoreGroups(item.name)" value="{{item.name}}" ng-checked="CheckAllGroups"> {{item.name}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 ">
                            <label style="font-weight:normal;">Please write the role/access types you want to apply for, the admin will contact you for further information:</label>
                            <textarea ng-model="oncoreRoles" class="form-control"></textarea>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row">
                    <div class="col-md-12">
                        <input type="checkbox" ng-model="chkBMT" id="chkBMT" ng-click="CheckApplication('BMT')" />
                        <label for="chkBMT" class="normal">BMT 1.0</label>
                    </div>
                </div>
                <div id="divBMT" class="row" ng-show="chkBMT">
                    <div class="col-md-12">
                        <label>Request Access Role:</label>
                        <select ng-model="BMT_AccessRole" ng-required="chkBMT">
                            <option value="Administrator">Administrator</option>
                            <option value="User">User</option>
                        </select>
                    </div>
                </div>

                <button class="btn btn-primary btn-active" ng-disabled="!frmRequest.$valid||!r.DataUseAgreement||(!chkBMT&&!chkOncore)" ng-click="SaveData()"><i class="fa fa-save"></i> Submit</button>

Now the submit button is getting enabled even if I don't select one check box in oncoreTrials.

I want to disable the submit button if user selects oncore and doesn't select any check box from oncoreTrials and oncoreGroups.

Please help me. Thanks in advance

Answer 1

This is not exactly plug and play directly into your code, but the idea is here for you. Bind the ng-disabled attribute to the evaluation of a function. From within your function, you can look at your checkboxes and determine if any are checked. This would work for a single group of checkboxes, but you could obviously add more logic to your anyChecked() function that you need. Hope this helps!

Here's a working demo

<button ng-disabled="anyChecked()">Submit</button>

$scope.anyChecked = function () {
    return !$scope.childCheckboxes.some(function (checkbox, index){
      return checkbox.checked;
    });
};