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">{{list?.name}}</label>
        <input [(ngModel)]="list.isChecked" [ngModelOptions]="{standalone: true}" name="options_{{i}}" 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">{{list?.description}}
      </small>
      <div class="input-group" style="margin-left: 28px; padding-top: 8px">
        <input class="form-control" disabled placeholder={{list?.amount}} 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={{list?.applicableFrom}} 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={{list?.applicableTo}} 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>

```