Question

我的页面上有两个复选框。在选择第一个复选框时，将显示复选框列表。检查其中至少一个以启用提交按钮

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

现在，即使我没有在oncoreTrials中选中一个复选框，也会启用提交按钮。

如果用户选择oncore并且没有从oncoreTrials和oncoreGroups中选中任何复选框，我想禁用提交按钮。

请帮帮我。提前致谢

Answer 1

这不是直接在您的代码中即插即用，但这个想法适合您。将ng-disabled属性绑定到函数的求值。在您的函数中，您可以查看复选框并确定是否已选中任何复选框。这适用于一组复选框，但您显然可以为您需要的anyChecked()函数添加更多逻辑。希望这有帮助！

这里是working demo

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

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

选中复选框后至少检查一个复选框 - AngularJS

1 个答案: