JumpIntoTheWater
JumpIntoTheWater

Reputation: 1336

checkbox becomes unchecked when another checkbox being clicked

If clicking the radio button id="hangashaYes" and then clicking the radio button id="personHangashaYeled" , then the first choose (id="hangashaYes") suddenly becomes unchecked. What am I missing?

export class Hangasha
{
    isHangasha: number;
    personHangasha : EPerson;
    isMotori : number
    isReiati : number;
    isShmiati: Number;

    constructor()
    {
        this.isHangasha = 0
        this.personHangasha = 0
        this.isMotori = 0;
        this.isReiati = 0;
        this.isShmiati = 0;
    }


}

enum EPerson
{
    None  = 0,
    Hore = 1,
    Yeled = 2
}
        <div class="hangasha">
          <div class="radio-button">
            <label style="margin-left: 30px;" class="control-label">need accessibility?</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaNo" type="radio" [(ngModel)]="hangasha.isHangasha" [value]="0">
              <span>No</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaYes" type="radio" [(ngModel)]="hangasha.isHangasha" [value]="1" >
              <span>Yes</span>
            </label>
          </div>
          <div *ngIf="hangasha.isHangasha==1" class="radio-button"> 
            <label style="margin-left: 30px;" class="control-label">For</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaHore" type="radio" [(ngModel)]="hangasha.personHangasha" [value]="1">
              <span>Parent</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaYeled" type="radio" [(ngModel)]="hangasha.personHangasha" [value]="2">
              <span>Child</span>  
            </label>
          </div>
        </div>

Upvotes: 1

Views: 41

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

Demo You need to add name for each radio groups.

 <div class="hangasha">
          <div class="radio-button">
            <label style="margin-left: 30px;" class="control-label">need accessibility?</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaNo" type="radio"name="hangasha.isHangasha" [(ngModel)]="hangasha.isHangasha" [value]="0">
              <span>No</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaYes" type="radio"name="hangasha.isHangasha"  [(ngModel)]="hangasha.isHangasha" [value]="1" >
              <span>Yes</span>
            </label>
          </div>
          <div *ngIf="hangasha.isHangasha==1" class="radio-button"> 
            <label style="margin-left: 30px;" class="control-label">For</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaHore" name="hangasha.personHangasha" type="radio" [(ngModel)]="hangasha.personHangasha" [value]="1">
              <span>Parent</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaYeled"name="hangasha.personHangasha"  type="radio" [(ngModel)]="hangasha.personHangasha" [value]="2">
              <span>Child</span>  
            </label>
          </div>
        </div>

Upvotes: 1

Related Questions