javascript - 如果隐藏则不需要复选框来启用按钮

Question

我在页面上有 4 个复选框，并且在选中复选框之前不会启用一个按钮。当某些复选框被隐藏时，我遇到了问题。当它们被隐藏时，我无法检查它们，然后该按钮将永远不会启用，因为所有框都没有被选中。我想要做的是，如果复选框被隐藏，则不需要启用该按钮。我脑海中想象的方式将是一长串 if/else 语句，而且会很丑陋且复杂。我知道必须有一个更简单的解决方案，但我似乎无法理解它会是什么。我将提供复选框和按钮的代码，然后描述我认为可行的方法，以便您可以了解为什么我认为可能有一种更简单的方法。此外，我们在此 Web 应用程序中使用 Angular。不确定这是否会对解决方案产生影响，但我想我会提到它。

复选框的代码是:

<div>
    <input type="checkbox" id="bes-confirmation" ng-model="checkboxes.besConfirmation" ng-show="migrationState.migrationData.usersWithBESEnabled.length > 0" />
    <label for="bes-confirmation" ng-show="migrationState.migrationData.usersWithBESEnabled.length > 0" >I understand -- BES</label>
    <br />
    <input type="checkbox" id="public-folder-confirmation" ng-model="checkboxes.publicFolderConfirmation" ng-show="migrationState.migrationData.publicFoldersEnabled"/>
    <label for="public-folder-confirmation" ng-show="migrationState.migrationData.publicFoldersEnabled" >I understand -- PF</label>
    <br />
    <input type="checkbox" id="adr-confirmation" ng-model="checkboxes.adrConfirmation" ng-show="!migrationState.migrationData.adrRecordIsCorrect" />
    <label for="adr-confirmation" ng-show="!migrationState.migrationData.adrRecordIsCorrect" >I understand -- ADR</label>
    <br />
    <input type="checkbox" id="sdr-confirmation" ng-model="checkboxes.sdrConfirmation" ng-show="migrationState.migrationData.splitDomainRoutingEnabled"/>
    <label for="sdr-confirmation" ng-show="migrationState.migrationData.splitDomainRoutingEnabled">I understand -- SDR</label>
</div>

按钮是:

<button type="button" 
            ng-click="scheduleMigration()"
            ng-disabled="!allCheckboxesAreChecked()">               
            Schedule Migration!
</button>

allCheckBoxesAreChecked 函数是:

$scope.allCheckboxesAreChecked = function() {
    return $scope.checkboxes.besConfirmation && $scope.checkboxes.adrConfirmation && $scope.checkboxes.sdrConfirmation && $scope.checkboxes.publicFolderConfirmation;
}

我想我可以有一系列 if/else 语句，就像(为了简单起见，用伪代码编写)

if !publicFoldersEnabled
  return besConfirmation && sdrConfirmation && adrConfirmation
else if !splitDomainRoutingEnabled
  return sdrConfirmation && adrConfirmation && publicFolderConfirmation

等等...

我可以继续使用可见和隐藏复选框的所有可能组合，但我觉得必须有更好的方法来做到这一点。关于如何比一系列 if/else 语句更轻松/更干净地完成此操作并且使用更少的代码，有什么想法吗？谢谢!

Answer 1

最简单的方法是标准化所有复选框的行为。使所有复选框看起来像:

<input type="checkbox" ng-model="checkboxes.someUniqueName" ng-show=migrationState.migrationData.someUniqueName"/>

然后您可以在某个数组中引用您希望监视的所有复选框:

var requirements = ['someUniqueName1', 'someUniqueName2', ... ];

最后，只需重写验证函数以对其进行循环:

$scope.validateCheckboxes = function() {
    var okay = true ;
    angular.forEach(requirements, function(req, index) {
        okay = okay && ($scope.checkboxes[req] || !$scope.migrationState.migrationData[req]);
    return okay;
};

如果您确实希望保留复选框特定行为(例如 ng-show 检查是 !migrationState... 的一个复选框)，您可以要求是成熟的对象而不是简单的字符串，其变量可以是用作选择正确测试的标志，例如

var requirements = [{'name':'someUniqueName1', 'reverse':false, 'checkLength':true}, ...]   

这种设置的另一个优点是易于扩展:如果您添加另一个复选框，只需将一个字符串添加到您的需求数组中就可以了。