使复选框无需启用按钮，如果隐藏

我有4个复选框在一个页面上，并且一个按钮，只有在复选框被选中时才会启用。当一些复选框被隐藏时，我遇到了问题。当它们被隐藏时，我无法检查它们，然后该按钮将永远不会被启用，因为所有的框都未被选中。我想要做的是使复选框不需要启用按钮，如果他们隐藏。我脑海中描绘的方式将会是一连串的if/else陈述，只会是丑陋而复杂的。我知道必须有一个更简单的解决方案，我似乎无法将我的头围绕在它将会发生的事情上。我将提供复选框和按钮的代码，然后描述我在想什么会起作用，这样您就可以了解为什么我认为可能有一种更简单的方法。另外，我们在这个网络应用中使用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; 
}

我想我可以有一个系列的，如果/ else语句只是类似的（为了简单起见，用伪代码写）

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

等等

我会继续与可见和隐藏复选框的每一个可能的组合，但我觉得必须有一个更好的方式来做到这一点。关于如何更容易/更清晰并且比一系列if/else语句更少的代码，我有何想法？谢谢！

来源

2014-10-02 AJM

最简单的方法是规范化所有复选框的行为。让它因此，所有所有的复选框的样子：

<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 check是！migrationState ...的复选框），则您可以拥有完整的对象而不是简单的字符串，其变量可以用作标志来选择正确的测试，例如

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

这种设置具有容易扩展额外的好处：只是一个字符串添加到您的要求，数组，如果你曾经添加其他复选框，你是好去。

来源

2014-10-02 23:17:17 Sycomor

谢谢！我认为这将会诀窍。感谢帮助。 – AJM 2014-10-02 23:49:11

把你的复选框形式和使用NG要求的属性里面，然后只启用如果表单是有效的按钮：

<form name="form" ng-submit="scheduleMigration()"> 
     <div ng-show="migrationState.migrationData.usersWithBESEnabled.length &gt; 0"> 
     <input type="checkbox" id="bes-confirmation" ng-model="checkboxes.besConfirmation" ng-required="migrationState.migrationData.usersWithBESEnabled.length &gt; 0" /> 
     <label for="bes-confirmation">I understand -- BES</label> 
     </div> 
     ... 
     <!-- other checkboxes --> 
     ... 
     <button type="submit" ng-disabled="!form.$valid">Schedule Migration!</button> 
    </form>

你可以把它如果你使用ng-if代替ng-show更短 - - 在这种情况下，该元素根本不在DOM树中，因此您可以用required替换ng-required="..."。

scope.visibleCheckboxes.besConfirmation = migrationState.migrationData.usersWithBESEnabled.length > 0 
scope.visibleCheckboxes.publicFolderConfirmation = migrationState.migrationData.publicFoldersEnabled 
scope.visibleCheckboxes.adrConfirmation = !migrationState.migrationData.adrRecordIsCorrect 
scope.visibleCheckboxes.sdrConfirmation = migrationState.migrationData.splitDomainRoutingEnabled

然后在你的NG-显示使用这些范围内的变量：

来源

2014-10-02 23:08:35 srdan

感谢您的想法！我可以看到这将如何工作。尽管与Sycomor的解决方案一起去。 – AJM 2014-10-02 23:53:36

，让你有，也许这样的事情你可以做的复选框的表演逻辑别处。那么你可以这样做：

function allCheckboxesAreChecked() { 
    var vC = scope.visibleCheckboxes 
    for (checkbox in vC) { 
     if (vC.hasOwnProperty(checkbox) && vc[checkbox] && !scope.checkboxes[checkbox]) { 
      return false; 
     } 
    } 
    return true; 
}

来源

2014-10-02 23:10:27 ryansilva

使复选框无需启用按钮，如果隐藏

回答

相关问题