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

cleaned it. Atleast on check box should be selected in both to get submit button enabled. — sravs17991
– sravs17991, Commented Jun 8, 2016 at 20:22

mhodges · Accepted Answer · 2016-06-08 20:33:32Z

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

answered Jun 8, 2016 at 20:33

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Check atleast one checkbox on selecting checkbox - AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related