Topic: MDB Select - disabled option functionality not working
                  
                  itsupport@arrkgroup.com
                  free
                  asked 6 years ago
                
MDB Select - disabled option functionality not working
                      
                      Damian Gemza
                      staff
                        answered 6 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
                      
                      itsupport@arrkgroup.com
                      free
                        answered 6 years ago
                    
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 6 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
                      
                      itsupport@arrkgroup.com
                      free
                        answered 6 years ago
                    
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 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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