制限チェックボックスの数を5に設定しました

Question

私は20個のチェックボックスを持っていますチェックボックスの数を5/20に制限する必要があります。チェックされたチェックボックスに基づいて、ラベルを表示/非表示にする必要があります。 5をチェックする際に

は、それ以上にチェックすべきではない、と5またはそれ以降をオフにすると、それが再びの5

私のチェックボックスは、角度を使用して生成され、私は限界まで異なるボックスをチェックできるようにする必要がありますディレクティブ* ngForには、5つの回答があるため、5つのチェックが始まります。それは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> 

ない

ことができなくなりチェックボックスの状態を変更することは可能ですか？

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