Question

我有一个复选框列表。在这里我想禁用其他复选框当我从列表中检查任何项目。现在，如果我取消选中该项，那么现在需要启用所有复选框。

这是plunker - http://plnkr.co/edit/5FykLiZBQtQb2b31D9kE?p=preview

取消选中任何复选框后，所有其余复选框仍处于禁用状态。我怎么能这样做？

这是app.ts文件 -

  import {bootstrap} from 'angular2/platform/browser';
  import {Component} from 'angular2/core'

  @Component({
   selector: 'my-app',
   template: `
        <h2>{{title}}</h2>
        <label  *ngFor="let cb of checkboxes">
       {{cb.label}}<input [disabled]="cb.status" type="checkbox"
       [(ngModel)]="cb.state" (click)="buttonState(cb.id)">
       </label><br />
      {{debug}}
      `
   })
   class App {
         title = "Angular 2 - enable button based on checkboxes";
         checkboxes = [{label: 'one',id: '0', status: ''},{label: 'two', id: '1', status:''},{label: 'three', id: '2', status: ''}];
         constructor() { 
           //this.buttonState();
           console.log("constructor called"); }
          buttonState(id) {
             console.log( id + "Button State Called");
             //return  this.checkboxes[0].status;
             if(this.checkboxes[id].state == true){
                this.checkboxes[id].status = true;
                this.checkboxes[(id+1)%3].status = false;
                this.checkboxes[(id+2)%3].status = false;

                console.log("True Block");
             }
             else (this.checkboxes[id].state == false) {
                this.checkboxes[id].status = false;
                this.checkboxes[(id+1)%3].status = true;
                this.checkboxes[(id+2)%3].status = true;

                console.log("False Block");
              }
         }

   get debug() {
        return JSON.stringify(this.checkboxes);
   }
}

bootstrap(App, [])
  .catch(err => console.error(err));

Answer 1

使用此buttonState功能代替您：

 buttonState(id) {
   this.checkboxes.forEach(function(checkbox) {
     if (checkbox.id !== id) {
       checkbox.status = !checkbox.status;
     }
   })
 }

请参阅plunker示例：http://plnkr.co/edit/ASzUR2jawpbifvwBXNO9?p=preview

Answer 2

另一种解决方案......不是很好......但如果你发现任何问题，你仍然可以试试

    class App {
      title = "Angular 2 - enable button based on checkboxes";
        checkboxes = [{label: 'one',id: '0', status: ''},{label: 'two', id: '1', status:''},{label: 'three', id: '2', status: ''}];
      constructor() { 
          console.log("constructor called");
      }
      buttonState(id) {
       console.log( this.checkboxes[id].state + "Button State Called");
      //return  this.checkboxes[0].status;
      if(this.checkboxes[id].state == true ){
         this.checkboxes[id].status = false;
         this.checkboxes[(id+1)%3].status = false;
         this.checkboxes[(id+2)%3].status = false;

         console.log("True Block");
      }
      else if(this.checkboxes[id].state == false ||  this.checkboxes[id].state == undefined) {
        this.checkboxes[id].status = false;
        this.checkboxes[(id+1)%3].status = true;
        this.checkboxes[(id+2)%3].status = true;

        console.log("False Block");
      }
  }

http://plnkr.co/edit/mAvSQbyP9oh84LWfpGIm?p=preview

如何通过单击Angular2中列表中的复选框来禁用其他复选框

2 个答案: