# 全選，單選 checkbox 應用(Angular)
###### tags: `工作筆記`

場景示意圖
<img src="https://i.ibb.co/0CMhkjz/checkbox02.jpg" alt="checkbox02" border="0">

如果選了無檢測，其他選項要disable
<img src="https://i.ibb.co/sgHKgKr/checkbox01.jpg" alt="checkbox01" border="0">

<ng-container *ngFor="let x of searchData.searstr;let i = index">
            <input
            *ngIf="x.view == 1"
            type="checkbox"
            [checked]="x.checkvalue"
            (change)="x.checkvalue = !x.checkvalue"
            (click)="changeCheck()"
            #checkboxes
            name="{{x.name}}" >
            &nbsp;<label for="x.name" *ngIf="x.view == 1">{{x.name}}</label>&nbsp;
</ng-container>

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>; 

changeCheck() {
    var count = 0;
    this.checkboxes.forEach((element) => {
      if(element.nativeElement.checked && element.nativeElement.name == '無檢測資料')
      {
        count++;
      }
      if(count > 0 )
      {
        this.SetClearCheck();
        count = 0;
      }
      else
      {
        this.SetClearNodateCheck()
      }
    });
  }

  SetClearCheck() {
    this.checkboxes.forEach((element) => {
      if( element.nativeElement.name != '無檢測資料')
      {
        element.nativeElement.checked = false;
        element.nativeElement.disabled = true;
      }
    });
  }

  SetClearNodateCheck() {
    this.checkboxes.forEach((element) => {
      if( element.nativeElement.name != '無檢測資料')
      {
        element.nativeElement.disabled = false;
      }
    });
  }

更多checkbox應用:

[checkbox資料庫單一欄位儲存](https://hackmd.io/@wyyyyyy/rySnyxTbO)