html - Angular 9 [disabled] /[attr.disabled]/[attr.readonly] doesnt work on select

Question

I have a dropdown which I would like to disable but none of the below helps.

<select style="margin-left: 5px; margin-right: 12px;" id="country-select" #countrySelect
            [attr.disabled]="shipperCountryDisabled">
              <option id="country-option-{{country.cnyCd}}" value="{{country.cnyCd}}"
                *ngFor="let country of this.getCountryList();">
                {{country.cnyCd}}</option>
</select>

ts code

'''
this.shipperCountryDisabled=true;
'''

I have tried [attr.disabled],[disabled],[attr.readonly] but nothing helps.

question from:https://stackoverflow.com/questions/65908611/angular-9-disabled-attr-disabled-attr-readonly-doesnt-work-on-select

Answer 1

Your provided code looks correct. You may have a problem elsewhere but you'd need to provide more detail before we could help. Here's a StackBlitz sample where [disabled] is bound to a component property.

app.component.html

<select [disabled]="selectDisabled">
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
</select>
<input type="button" (click)="selectDisabled = !selectDisabled" value="Toggle">

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  selectDisabled: boolean = true;
}