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时，radio2value必须启用，并且在下拉列表中有自定义输入（如果我选择了custom），则最终用户应输入自定义输入！怎么做？

谢谢！

Answer 1

尝试在带有布尔值的选择控件上设置[disabled]属性。

根据您的单选按钮所选值进行更改。

Answer 2

您可以使用“材料选择”的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;
    }
}

Answer 3

<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（此处是最喜欢的季节）。现在值===最喜欢的季节，意味着禁用现在为假

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

3 个答案: