MDB Select - disabled option functionality not working

Dear itsupport,

As it's described in the documentation, if you're updating the select array dynamically, you have to use the spread operator [..., ].

Please check the below code:

.html:

<div class="row">
  <div class="col-md-6 mx-auto my-5">
    <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
    <button mdbBtn color="primary" (click)="disable()">Disable item</button>
  </div>
</div>

.ts:

export class AppComponent implements OnInit{
  optionsSelect: Array<any>;
  ngOnInit() {
    this.optionsSelect = [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
      { value: '3', label: 'Disabled option', disabled: true },
    ];

    this.optionsSelect[2].disabled = true;
  }

  disable() {
    this.optionsSelect[0].disabled = true;

    this.optionsSelect = [...this.optionsSelect, this.optionsSelect];
  }
}

Best Regards,

Damian

Dear itsupport@arrkgroup.com

The [disabled] option works on mdb-select component. The below code shows how you should use it.

<mdb-select [disabled]="true" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>

Please check our Select documentation.

Best Regards, Damian

I want to disable option of select (which is not working)

<div class="col-md-6">
<mdb-select [options]="disOptionsSelect" placeholder="Choose your option" label="Example label"></mdb-select>

this.disOptionsSelect = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' } ,
    { value: '3', label: 'Disabled option', disabled: true } ,
  ];

Dear itsupport,

Where did you find the approach with disabled: true in Select options?

There's no such possibility in our mdb-select component to disable an option in select's dropdown.

Best Regards,

Damian

Well, I am surprised you say that because I have been able to achieve that.

It works properly meaning the option becomes disabled when you initialize the data with disabled=true.However, I am not able to achieve that behavior dynamically.

e.g. when you change the disable property of an option on any click event, it does not become disabled.

this.disOptionsSelect = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Disabled option', disabled: true },
];

click() {
  this.disOptionsSelect[0].disabled = true;
}

Thank you for the right solution, appreciate