In this code there are two radio button and each consist of some information but in the first radio button there is a one checkbox i.e input type="checkbox" so the issue is if I click on first radio button and inside that I also click on checkbox it works fine but when I click on other radio button the checkbox should get unchecked similarly When I click on first radio button the checkbox should get unchecked until I click on it
<div>
<div>
<label class="custom-control custom-radio">
<input class="custom-control-input" name="isConcessionApplied" type="radio" [checked]="true"
(click)="setIsConcessionApplied(true)" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Apply Concession</span>
<tc-icon [color]="['#df4b33','#df4b33']" name="discount"></tc-icon>
</label>
</div>
<div class="pl-5">
<div *ngFor="let list of concessionsApplicable; let i=index">
<label class="ml-0 mr-0 mt-1 c-checkbox-container" style="font-size: 16px"
[ngClass]="!!concessionsApplicable.isConcessionApplied ? '' : 'disabled'">
<label class="m-0" style="font-size: 14px"></label>
<input [(ngModel)]="list.isChecked" [ngModelOptions]="{standalone: true}" name="options_" type="checkbox"
(ch) value="true">
<span class="checkmark"></span>
</label>
<small *ngIf="list?.description" style="margin-left: 28px"
class="text-muted help-block pb-3">
</small>
<div class="input-group" style="margin-left: 28px; padding-top: 8px">
<input class="form-control" disabled placeholder= type="text" />
</div>
<div>
<div class="row input-group" style="margin-left: 28px">
<div class="col-md-6 pl-0">
<div class="form-group">
<label class="text-muted" for="leasestart">Start
Date</label>
<div class="input-group">
<input class="form-control" disabled placeholder= type="text" />
</div>
</div>
</div>
<div class="col-md-6 pr-0">
<div class="form-group">
<label class="text-muted" for="leasestart">End Date</label>
<div class="input-group">
<input class="form-control" disabled placeholder= type="text" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<label class="custom-control custom-radio">
<input class="custom-control-input" name="isConcessionApplied" type="radio"
(click)="setIsConcessionApplied(false)" />
<span class="custom-control-indicator"></span>
<span class="custom-control-description">No Concession</span>
<tc-icon [color]="['#9b9b9b','#9b9b9b']" name="discount">
</tc-icon>
</label>
</div>
<div *ngIf="!!concessionsApplicable" class="pl-5">
<ng-select [clearable]="false" bindLabel="friendlyName" bindValue="id" appendTo="body" placeholder="Select reason"
[items]="noConcessionReasons" [searchable]="false" [(ngModel)]="concessionsApplicable.noConcession"
[ngModelOptions]="{standalone: true}" class="global-dropdown"
[ngClass]="!!concessionsApplicable.isConcessionApplied ? 'disabled' : ''">
</ng-select>
<div *ngIf="isNoConcessionReasonReq === true">
<small class="text-danger">Required input</small>
</div>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire