选择单选按钮后如何 enable/disable 下拉列表？

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>

当我 select radio button 1 then radio 1 drop down 必须启用，当我 select radio button 2 then radio 2 drop down 必须启用当我 select radio2Data 然后 radio2value 必须启用并且在下拉列表中有自定义输入如果我 select 自定义那么自定义输入应该由最终用户输入！怎么做？

提前致谢！

Answer 1

尝试在采用布尔值的 select 控件上设置 [disabled] 属性。

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

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（这里最喜欢的季节）。现在 value === favorite season wich means disabled is now false

Answer 3

您可以使用 Material Select 的 disabled 属性来禁用 Select 选项：

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;
    }
}

选择单选按钮后如何 enable/disable 下拉列表？

how to enable/disable drop down list after selecting radio button?

material-design

angular-material

angular

angular5