选择单选按钮后如何启用/禁用下拉列表？

Question

JSON 数据：

radio1Data: any[] = [
    { value: 'col-1', viewValue: 'Col-1' },
    { value: 'col-2', viewValue: 'Col-2' }

  ];
  radio2Data: any[] = [
    { value: 'col-1', viewValue: 'Col-1' },
    { value: 'col-2', viewValue: 'Col-2' }

  ];
  radio2Value: any[] = [
    { value: 'col-1', viewValue: '(10)' },
    { value: 'col-2', viewValue: '(4)' },
    { value: 'col-1', viewValue: 'Custom' }
  ];

HTML：

<div class="window-pad-height">
  <div class="row">
  </div>
  <mat-radio-group>
    <div class="row">
      <div class="col-md-2">
        <mat-radio-button value="1">radio1
        </mat-radio-button>
      </div>
      <div class="col-md-2">
        <mat-form-field>
          <mat-select placeholder="Select ">
            <mat-option *ngFor="let radio1 of radio1Data" [value]="radio1.value">
              {{radio1.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <mat-radio-button value="2">radio2
        </mat-radio-button>
      </div>
      <div class="col-md-2">
        <mat-form-field>
          <mat-select placeholder="Select ">
            <mat-option *ngFor="let radio2 of radio2Data" [value]="radio2.value">
              {{radio2.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div class="col-md-2">
        <mat-form-field>
          <mat-select placeholder="value">
            <mat-option *ngFor="let value of radio2value" [value]="radio2value.value">
              {{radio2value.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
  </mat-radio-group>
</div>

当我选择单选按钮 1 时，必须启用单选按钮 1 下拉菜单，当我选择单选按钮 2 时，必须启用单选按钮 2 下拉菜单 当我选择 radio2Data 时，radio2va​​lue 必须启用，如果我选择自定义，则在下拉列表中有自定义输入，则最终用户应输入自定义输入！ 怎么做？

提前致谢！

Answer 1

尝试在选择控件上设置[disabled] 属性，该属性采用布尔值。

根据您的单选按钮选择的值更改此项。

Answer 2

<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    <label>{{season}}<input [disabled]="season !== favoriteSeason"></label>
  </mat-radio-button>
</mat-radio-group>

您可以在广播组中使用 ngmodel。然后你给 ecery 按钮一个 [value] ，稍后将它分配给你的 ngmodel 变量。使用 [disabled] 您可以禁用您的垫子选择（例如，这里是我的输入）。

简而言之，您按下一个按钮。值现在是选定的 ngmodel（这里最喜欢的季节）。现在价值 === 最喜欢的季节意味着禁用现在是错误的

Answer 3

您可以使用材质选择的disabled 属性来禁用选择选项：

StackBlitz Example

HTML 代码的变化：

<div class="window-pad-height">
    <div class="row"></div>
    <mat-radio-group>
        <div class="row">
            <div class="col-md-2">
                <mat-radio-button value="1" (click)="onClick(1)">radio1</mat-radio-button>
            </div>
            <div class="col-md-2">
                <mat-form-field>
                    <mat-select placeholder="Select " [disabled]="isDisabled">
                        <mat-option *ngFor="let radio1 of radio1Data" [value]="radio1.value">
                            {{radio1.viewValue}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <mat-radio-button value="2" (click)="onClick(2)">radio2</mat-radio-button>
            </div>
            <div class="col-md-2">
                <mat-form-field>
                    <mat-select placeholder="Select " [disabled]="isDisabled1">
                        <mat-option *ngFor="let radio2 of radio2Data" [value]="radio2.value">
                            {{radio2.viewValue}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

        </div>
    </mat-radio-group>
</div>

在 TS 中：

isDisabled: boolean = false;
isDisabled1: boolean = false;
onClick(rbNo) {
   f (rbNo == 1) {
      this.isDisabled = false;
      this.isDisabled1 = true;
   }
   else {
      this.isDisabled = true;
      this.isDisabled1 = false;
    }
}