简体   繁体   中英

How to disable all other checkboxes inside ngfor when I select a checkbox?

I have list of item inside table for each item I'm enabling a checkbox to edit and delete values. But I can select only 1 checkbox at time when selected others should be disabled.

<tr *ngFor="let lists of resObj;let i = index">
              <td>
                <label class="check-box-block">
                  <input type="checkbox" (change)="selectBox($event, lists, lists.id,i)" id="checkBox"
                    [disabled]="chk" />
                  <span class="checkmark"></span>
                </label>
              </td>
</tr>

selectBox(event,list, id, i)
{
 if (event.target.checked) {
      this.chk = true;
      this.checkedArray.push(list);
    } else {
      this.chk = false;
      const newArr = this.checkedArray.filter(item => item !== list);
      this.checkedArray = newArr;
    }
  }
}

you can use a variable "select" and use some like

<input type="checkbox" [checked]="select==i" (change)="select=select==i?-1:i">

NOTE: I don't understand that "selected others should be disabled " (I suppose you want to say unchecked )

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM