Topic: MDB Select - disabled option functionality not working

itsupport@arrkgroup.com free asked 3 years ago


MDB Select - disabled option functionality not working



Thank you for the right solution, appreciate


Damian Gemza staff answered 3 years ago


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



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

Damian Gemza staff answered 3 years ago


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



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

Damian Gemza staff answered 3 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.1
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No