Angular 将选中的复选框计数限制为5

我有20个复选框，我需要能够将复选框的数量限制为5/20。根据选中的复选框，它应该隐藏/显示标签

勾选5后，不应再勾选，取消勾选5或任何后续选项后，应允许我再次勾选一个不同的框，最多不超过5

我的复选框是使用angular指令*ngFor生成的，到目前为止，将有5个答案，因此从5个检查开始

      <div *ngFor="let question of questions; let i = index" class="row container-generic">
    <div class="col-md-8">
      <div class="container-input-checkbox">
        <label class="container-flex">
          <input #checkBox class="pvq-create-checkbox" type="checkbox" name="{{i}}" (change)="checkedState($event, checkBox)" [checked]="question.answer"> 
          <div class="pvq-create-label">
            <div *ngIf="lang == 'en'">
               <p>{{ question.question_EN }}</p>
            </div>
            <div *ngIf="lang == 'fr'">
               <p>{{ question.question_FR }}</p>
            </div>
          </div>
        </label>
        <label [@hideShow]="checkBox.checked ? 'show' : 'hide'" >Answer
          <input type="textbox" name="" placeholder="{{ question.answer }}">
        </label>
      </div>
    </div>
  </div>

{{question.question{}

{{question.question_FR}}

答复

在我的组件中，我尝试了一切，当我尝试在第5次之后禁用复选框时，它不允许我取消选中或重新选中，因为它在计数为5时被禁用。无法再更改复选框的状态，是否可能

      checked(checkBox) {
    let index = checkBox.name;
    console.log('Index from checked() --> {}', index);
    if(this.answers[index] != "" && this.createMode){
      return true;
    }
      //For Example it will always pass through here updateMode = true
    if(this.answers[index] != "" && this.updateMode ){
      return true;
    }
  }

  checkedState(event, checkBox){
    let index: number = event.target.name;
    console.log('Index is ' + index);
    if(event.target.checked && this.counter < 4 && this.updateMode){
      this.counter++;
      console.log('checked ' + this.counter);
      this.checked(checkBox);

    } 

    if(!event.target.checked && this.counter != 0 && this.counter <= 5 && this.updateMode){
      --this.counter;
      console.log('unchecked ' + this.counter);
    }
  }

  hideShow(){
    return 'hide';
      // return 'show';
  }

选中（复选框）{
让index=checkBox.name；
log（'Index from checked（）-->{}'，Index）；
if（this.answers[index]！=“”&this.createMode）{
返回true；
}
//例如，它将始终通过此处updateMode=true
if（this.answers[index]！=“”&this.updateMode）{
返回true；
}
}
checkedState（事件，复选框）{
let索引：number=event.target.name；
log（'索引为'+索引）；
if（event.target.checked&&this.counter<4&&this.updateMode）{
这个.counter++；
console.log（'checked'+这个计数器）；
这个。选中（复选框）；
} 
如果（！event.target.checked&&this.counter！=0&&this.counter您过度使用了您的逻辑，您可以这样做

selectedItems: number =0;

checkedState(event, checkBox) {
            if(event.target.checked === true){
              if(this.counter < 5){
              this.counter++
            }else{
               event.target.checked = false;
            }
            }else if(this.counter>0){
              this.counter--;
            }
        }

selectedItems:number=0；
checkedState（事件，复选框）{
if（event.target.checked==true）{
如果（此计数器<5）{
这个柜台++
}否则{
event.target.checked=false；
}
}否则如果（此计数器>0）{
这个柜台；
}
}
你的逻辑做得太过分了你可以这样做

selectedItems: number =0;

checkedState(event, checkBox) {
            if(event.target.checked === true){
              if(this.counter < 5){
              this.counter++
            }else{
               event.target.checked = false;
            }
            }else if(this.counter>0){
              this.counter--;
            }
        }

selectedItems:number=0；
checkedState（事件，复选框）{
if（event.target.checked==true）{
如果（此计数器<5）{
这个柜台++
}否则{
event.target.checked=false；
}
}否则如果（此计数器>0）{
这个柜台；
}
}
我完全超出了我的逻辑——哇，谢谢你，工作得很好。我完全超出了我的逻辑——哇，谢谢你，工作得很好。