# CheckBox like Radio Button behavior Angular
###### tags: `工作筆記`

First way
> Using Disabled when another is checked then disabled

 <label>
            <input type="checkbox" [(ngModel)]="custom.RopeSingal" [disabled]="custom.RopeDouble" class="custom-radio" id="RopeSingal" name="RopeSingal">
            <label for="RopeSingal" class="btn btn-default"> *** </label>
          </label>
          <label>
            <input type="checkbox" [(ngModel)]="custom.RopeDouble" [disabled]="custom.RopeSingal" class="custom-radio" id="RopeDouble" name="RopeDouble">
            <label for="RopeDouble" class="btn btn-default">!!!</label>
          </label>

[Second way](https://stackblitz.com/edit/checkbox-like-radio-button-behavior-angular?file=src/app/app.component.html)

Main process

<div *ngFor="let item of fruits;  let i = index">
  <input type="checkbox" id="{{item}}" name="{{item}}" value="{{i}}" [checked]="selected === i" (change)="clicked($event,i)">
  <label for="{{item}}"> {{item}}</label>
</div>

selected=-1;
fruits = ['Apple', 'Banana'];
clicked(event,i) {
    this.selected = i;
    if(!event.target.checked)
    {
      this.selected = -1;
    }
  }