Question

我有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

Answer 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

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

1 个答案: