禁止取消选中 angularJS 中的所有复选框答案

【问题标题】：Disallow unchecking of all checkboxes in angularJS禁止取消选中 angularJS 中的所有复选框
【发布时间】：2016-02-17 06:19:38
【问题描述】：

我将 AngularJS 指令用于复选框列表checklist-model，但我需要始终保持至少一个复选框处于选中状态。我通过添加 if 更改了 checklist-model.js：

watch if(current.length > 1)

在删除支票之前：

scope.$watch(attrs.ngModel, function(newValue, oldValue) {
  if (newValue === oldValue) { 
    return;
  } 
  var current = getter(scope.$parent);
  if (angular.isFunction(setter)) {
    if (newValue === true) {
      setter(scope.$parent, add(current, value, comparator));
    } else {
        if(current.length > 1)
        {
            setter(scope.$parent, remove(current, value, comparator));
        }
    }
  }

  if (checklistChange) {
    checklistChange(scope);
  }
});

问题是 UI 已经更改为未选中，而模型没有更改。

关于如何将复选框更改回“已选中”状态，或者更好地在它更改为已选中之前捕获它，任何人都有一个优雅的建议（最好没有 JQuery）？

JSfiddle here，尝试取消选中所有复选框并查看当所有复选框都未选中时（我试图阻止）模型保持不为空（这很好但还不够）

【问题讨论】：

我了解您的问题，但我认为您正在寻找错误的解决方案。如果用户不想禁用复选框，就让他这样做。否则他必须选择另一个复选框，然后他可以取消选中旧的？您描述的这种行为是一种糟糕的用户体验。如果他取消选中所有复选框并禁用提交按钮，请保持简单并使用表单验证显示警告

标签： javascript angularjs checkbox angularjs-directive checklist-model

【解决方案1】：

这可能来自 Angular 的异步特性和您正在使用的库。到目前为止，我能找到一些像这样的肮脏解决方法 (jsfiddle)：创建一个事件来跟踪输入的点击并执行以下操作：

  $scope.onclick = function(evt) {
    if ($scope.user.roles.length === 1 && prevLength === 1) {
      evt.preventDefault();
    }

    prevLength = $scope.user.roles.length;
  };

然后将其添加到您的元素中

 ng-click="onclick($event)"

我并不是说它是完美的，但它确实有效

【讨论】：

【解决方案2】：

我的一位同事建议在选中该复选框后禁用该复选框，这样既可以防止模块的更改（因此指令甚至不需要更改），并且用户理解他的 UX 也更好无法取消选中它：

     <input type="checkbox" checklist-model="user.roles" checklist-value="role.id" ng-disabled="shouldDisable(role.id)"> {{role.text}}

 $scope.shouldDisable = function(roleId) {
        var isDisabled = false;
        if($scope.user.roles.length === 1) {
            isDisabled = $scope.user.roles.indexOf(roleId) !== -1;
        }
        return isDisabled;
    }

在thisJSfiddle 中查看答案

【讨论】：

【解决方案3】：

目前组件不支持这个，但是有讨论实现最小长度/最大长度https://github.com/vitalets/checklist-model/issues/15，然后这将简单地使用checklist-minlength=1来实现。

我还编辑了您的建议以实施checklistBeforeChange。我将在下一批中尝试处理这个问题。在 v0.8.0 中实现。

【讨论】：

在 v0.8.0 中实现。

【解决方案4】：

使用 array.some 函数的@ozba 答案的更好版本：

public atLeastOneRowEnabled(row): boolean {
        //at least one row is visible except the current line
        return !this.rows.some(rowIterator => rowIterator.logical_name !== row.logical_name && rowIterator.isVisible);
    }

【讨论】：