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

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

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

这是普朗克-

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

取消选中任何复选框时，其余所有复选框仍处于禁用状态。我该怎么做

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

这是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));

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

从'angular2/platform/browser'导入{bootstrap}；
从'angular2/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{title}}
{{cb.label}


{{debug}}
`
})
类应用程序{
title=“Angular 2-基于复选框启用按钮”；
复选框=[{label:'one'，id:'0'，status:'}，{label:'two'，id:'1'，status:''}，{label:'three'，id:'2'，status:'''}]；
构造函数（）{
//这个.buttonState（）；
log（“调用的构造函数”）；}
按钮状态（id）{
日志（id+“按钮状态被调用”）；
//返回此。复选框[0]。状态；
if（this.checkbox[id].state==true）{
此选项。复选框[id]。状态=true；
此。复选框[（id+1）%3]。状态=false；
此。复选框[（id+2）%3]。状态=false；
console.log（“真块”）；
}
else（this.checkbox[id].state==false）{
此选项。复选框[id]。状态=false；
此选项。复选框[（id+1）%3]。状态=true；
此选项。复选框[（id+2）%3]。状态=true；
控制台日志（“假块”）；
}
}
获取调试（）{
返回JSON.stringify（this.checkbox）；
}
}
引导（应用程序，[]）
.catch（err=>console.error（err））；

使用此

按钮安装

功能代替您的：

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

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

---

参见plunker示例：

另一个解决方案……不是一个好方案……但如果发现任何问题，您仍然可以尝试

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

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