ng-ytl-zorro-antd/src/showcase/nz-demo-radio/nz-demo-radio-group-disabled.component.ts

An enterprise-class UI components based on Ant Design and Angular

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-radio-group-disabled',
  template: `
    <div>
      <label nz-radio [(ngModel)]="singleValue" [nzDisabled]="isDisabled">
        <span>独立使用 {{ singleValue }}</span>
      </label>
    </div>
    <nz-radio-group [(ngModel)]="radioValue">
      <label nz-radio [nzValue]="'A'">
        <span>A</span>
      </label>
      <label nz-radio [nzValue]="'B'" [nzDisabled]="isDisabled">
        <span>B</span>
      </label>
      <label nz-radio [nzValue]="'C'" [nzDisabled]="isDisabled">
        <span>C</span>
      </label>
      <label nz-radio [nzValue]="'D'">
        <span>D</span>
      </label>
    </nz-radio-group>
    <div style="margin-top: 20px;">
      <button nz-button [nzType]="'primary'" (click)="toggleDisabled()">Toggle Disabled</button>
    </div>
  `,
  styles  : []
})
export class NzDemoRadioGroupDisabledComponent {
  radioValue = 'A';
  singleValue = false;
  isDisabled = true;
  toggleDisabled = () => {
    this.isDisabled = !this.isDisabled;
  };
}