CODEWITHSUNDEEP
angularcheckboxconditional-statementsangular-ng-ifchecked
Alex Mo
Alex Mo

Reputation: 131

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

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 class="checkbox-input" id="checkbox-one" type="checkbox" />
<label class="custom-checkbox" for="checkbox-one">
<span><svg width="18px" height="18px"><use xlink:href="#check"></use></svg></span>
<span>Checkbox1.</span>
</label>

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

</div>

CodePen Link

Upvotes: 0

Views: 1364

Answers (3)

Eliseo
Eliseo

Reputation: 57929

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

Upvotes: 0

Andrei Tătar
Andrei Tătar

Reputation: 8295

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%2Fapp%2Fapp.component.html

Upvotes: 0

Thilak S
Thilak S

Reputation: 92

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.

Upvotes: 1

Related Questions