html 如何使用Angular.js/JavaScript限制复选框的点击

iaqfqrcu  于 2022-11-27  发布在  Angular
关注(0)|答案(1)|浏览(125)

我在一个循环中有很多复选框,我需要使用Angular.js来限制那些使用一些条件的复选框。让我首先分享my code in Plunkr
我可以检查那里每天有一个复选框,如果用户点击+按钮,复选框是增加。在这里,我需要当用户从任何一天的最大2复选框选中,其他将被禁用。
7天开始,整个表中只能选中2个复选框。我还需要在单击store按钮后,将两个复选框的值与各自的行下拉数据提取到控制器端函数中。

e5njpo68

e5njpo681#

所以,另一个答案会让你走上正确的道路,而这个答案应该会让你一直走到那里。你基本上想利用angular的ng-disabled属性,当你给予它的表达式求值为true时,它所附加的表单域将被禁用。
在html中,您可以在符合条件时将以下内容放在您希望禁用的任何表单字段上:

ng-disabled="isDisabled($parent.$index, $index)"

父索引将引用当前外部循环的日期,而索引将引用内部循环中的当前答案。
我用于实现此解决方案的主控制器逻辑如下:

// initialize an array of selections
  $scope.selectedAnswers = [];

  // check if answer is selected...
  // have to keep track of both the index of the answer and its parent day
  $scope.answerIsSelected = function(dayIdx, answerIdx) {
    var thisAnswer = $scope.days[dayIdx].answers[answerIdx];
    return $scope.selectedAnswers.indexOf(thisAnswer) > -1;
  };

  // depending on whether answer is already selected, 
  // adds it to or splices it from the selectedAnswers array
  $scope.toggleAnswerSelected = function(dayIdx, answerIdx) {
    var thisAnswer = $scope.days[dayIdx].answers[answerIdx];
    if ($scope.answerIsSelected(dayIdx, answerIdx)) {
      $scope.selectedAnswers.splice($scope.selectedAnswers.indexOf(thisAnswer), 1);
    } else {
      $scope.selectedAnswers.push(thisAnswer);
    }
  };

  // the check on each form element to see if should be disabled
  // returns true if the answer is not an element in the selected array
  // and if there are already two answers in the array
  $scope.isDisabled = function(dayIdx, answerIdx) {
    return !$scope.answerIsSelected(dayIdx, answerIdx) && $scope.selectedAnswers.length === 2;
  };

最后,在行末的复选框中输入所需的属性:

<input type="checkbox" 
         name="chk" 
         value="true" 
         ng-checked="answerIsSelected($parent.$index, $index)"
         ng-click="toggleAnswerSelected($parent.$index, $index)"
         ng-disabled="isDisabled($parent.$index, $index)">

完整的片段如下...
第一个

相关问题