即使在选择一个值后，下拉菜单仍然禁用

Question

有两个下拉按钮 d1 和 d2。 d2 被禁用。从 'd1' 中选择一个值后，'d2' 仍然被禁用。

<div class="card-container">
        <label>Country</label>
        <select placeholder="Country" [(ngModel)]="selectedCountry" (change)="changeCountry($event)" >
            <option>--Choose Country--</option>
            <option *ngFor="let country of Countries" >{{country.name}}</option>
        </select>
    </div>

    <div class="card-container">
        <label>State</label>
        <select placeholder="State" (change)="changeState($event)"
      [disabled]="selectedCountry">
            <option>--Choose State--</option>
            <option *ngFor="let state of states">{{state.name}}</option>
        </select>
    </div>

使用 [disabled]="selectedCountry" d2 被禁用，但如果 [disabled]="!selectedCountry" 则不禁用我想让 d2 只有在选择 d1 时才可选择。

Answer 1

[disabled]="selectedCountry" 表示如果您有一些 selectedCountry 的值，它将是 true，这意味着它已禁用。所以条件应该是相反的

[disabled]="!selectedCountry"

如果 selectedCountry 没有任何值，

将禁用它。

<div class="card-container">
  <label>Country</label>
  <select placeholder="Country" [(ngModel)]="selectedCountry" (change)="changeCountry($event)" >
    <option>--Choose Country--</option>
    <option *ngFor="let country of Countries" >{{country.name}}</option>
  </select>
</div>

<div class="card-container">
  <label>State</label>
  <select placeholder="State" (change)="changeState($event)" [disabled]="!selectedCountry">
    <option>--Choose State--</option>
    <option *ngFor="let state of states">{{state.name}}</option>
  </select>
</div>

还要确保 selectedCountry 的初始值为 selectedCountry = ''

即使在选择一个值后，下拉菜单仍然禁用

Dropdown is still disable even after selecting a value

javascript

angular

disabled-input