Restrict user to only check one checkbox at a time in Angular-CodePudding

I have a use case where I MUST use Angular to render my checkboxes along with their respective contents. The ASK is to restrict the user to only check one checkbox at a time(i.e. User should be able to check checkbox A & have check box B disabled, or vice versa).

I know I should use the 'ngIf' directive. However, I am fairly new to Angular & I could use an expert advice:)

My code:

<div>

<input  id="checkbox-one" type="checkbox" />
<label  for="checkbox-one">
<span><svg width="18px" height="18px"><use xlink:href="#check"></use></svg></span>
<span>Checkbox1.</span>
</label>

<input  id="checkbox-two" type="checkbox" />
<label  for="checkbox-two">
<span><svg width="18px" height="18px"><use xlink:href="#check"></use></svg></span>
<span>Checkbox2.</span>
</label>

</div>

CodePen Link

CodePudding user response：

If you're requirement is to restrict user to select only one option it's better to use radio button rather than checkbox, as checkboxes are meant to be used for multi selected and radio buttons are used for single option selection.

CodePudding user response：

If you only want to hide them, you can just use *ngIf and check if the other box is checked or not:

<div>
  <ng-container *ngIf="!checkbox2">
    <input id="checkbox-one" type="checkbox" [(ngModel)]="checkbox1" />
    <label for="checkbox-one">
      <span>Checkbox1.</span>
    </label>
  </ng-container>
  <br />
  <ng-container *ngIf="!checkbox1">
    <input id="checkbox-two" type="checkbox" [(ngModel)]="checkbox2" />
    <label for="checkbox-two">
      <span>Checkbox2.</span>
    </label>
  </ng-container>
</div>

you can also just disable the other checkbox so the layout doesn't shift:

<div>
  <input
    id="checkbox-one"
    type="checkbox"
    [(ngModel)]="checkbox1"
    [disabled]="checkbox2"
  />
  <label for="checkbox-one">
    <span>Checkbox1.</span>
  </label>
  <br />
  <input
    id="checkbox-two"
    type="checkbox"
    [(ngModel)]="checkbox2"
    [disabled]="checkbox1"
  />
  <label for="checkbox-two">
    <span>Checkbox2.</span>
  </label>
</div>

https://stackblitz.com/edit/angular-ivy-tp84hu?file=src/app/app.component.html

CodePudding user response：

You has an unique value, so use an unique variable. Then you can use [ngModel] and (ngModelChange) to change the value of the variable

<input type="checkbox" [ngModel]="variable==1" (ngModelChange)="variable=$event?1:0">
<input type="checkbox" [ngModel]="variable==2" (ngModelChange)="variable=$event?2:0">

See how work the one-binding: The first checkbox is true only if variable is equal 1, the second one is true only if variable is equal 2.

The (ngModelChange)( happens when change), the value of the variable is 1 (o 2) si "$event" is true, else the variable gets the value 0