jeudi 12 décembre 2019

Uncheck the checkbox when click on other radio button

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