Question

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

在检查5时，不应再检查，并且在取消选中5或任何后续时，它应该允许我再次检查另一个盒子，直到5的限制。

我的复选框是使用角度指令* 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>

在我的组件中，我尝试了所有内容，当我尝试在第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';
  }

Answer 1

你过度做你的逻辑，你可以像这样做

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--;
            }
        }

限制复选框选中计数为5

1 个答案: