如何使用angular2一次取消选中一个复选框答案

【问题标题】：How to make one checkbox to be unchecked at a time using angular2如何使用angular2一次取消选中一个复选框
【发布时间】：2019-07-13 17:57:44
【问题描述】：

我已经选中了 3 个复选框。现在，如果我取消选中 3 个复选框中的一个，其余 2 个复选框应该被禁用并带有复选标记。当我再次选中未选中的复选框时，应启用所有 3 个复选框。

HTML：

    <div *ngFor="let contact of userList" [hidden]="!contact.isDisabled">

                  <input  type="checkbox" name="radio" (click)="selectCheckboxInvitee($event.target.checked, contact, false)"
                    [(ngModel)]="contact.isChecked"  />
                  <a>{{ contact.FirstName }} &nbsp;{{ contact.LastName }}</a>
                </div>

TS：

    selectCheckboxInvitee(evt, contact, isMultiple) {
        if (evt) {

          if (!isMultiple) {
            this.userList.forEach(function (obj) {
              if(!obj.isDisabled) {
              if (obj.Id === contact.Id) {
                obj.isChecked = true;
              }
              else {
                obj.isChecked = false;
              }
              }
            });

          }

        }
      }

      getSharedIds(sPk) {
      //  this.dicom.getSharedIDs(sPk).subscribe(res => {
      //    if (res.Body) {
            const inviteeIds = this.res
              ? this.res.split(",")
              : [];
            this.userList.forEach(r => {
              r.isChecked = false;
            //  r.isDisabled = false;
              if (inviteeIds) {
                inviteeIds.forEach(i => {
                  if (i == r.Id) {
                    r.isChecked = true;
                    r.isDisabled = true;
                  }
                });
              }
            });
          }

DEMO

【问题讨论】：

标签： angular

【解决方案1】：

你可以做这样的事情。更改点击事件以更改输入事件并在每个输入上添加禁用属性，该属性将根据一个复选框是否被禁用这一事实进行更改。

HTML

 <div *ngFor="let contact of userList" [hidden]="!contact.isDisabled">    
    <input  type="checkbox" name="radio" (change)="selectCheckboxInvitee($event.target.checked, contact, false)" [disabled]="contact.disable" [(ngModel)]="contact.isChecked"  />
    <a>{{ contact.FirstName }} &nbsp;{{ contact.LastName }}</a>
 </div>

app.component.ts

selectCheckboxInvitee(evt, contact, isMultiple) {
    if (!evt) {
        this.userList.forEach(function (obj) {          
            if (obj.Id !== contact.Id) {
              obj.disable = true;
            } else {
              obj.disable = false;
            }          
        });
    } else {
      this.userList.forEach(function (obj) {          
              obj.disable = false;
        });
    }
  }

您还需要使用 userList 对象 userList:any ; 添加任何类型

查看更新的stackblitz

【讨论】：