Enable select even if options list is empty?

Issue

I am using angular-chosen, by default if the source list is empty the element is disabled. Is there a way to enable the element even if the source list is empty?

Solution

After looking into the source code I can conclude that it’s not possible (at least, without hacks).

You see, they are calling disableIfEmpty function and there’s no way to control it.

They are watching disabled attribute changes, and when it changes – they update component. This was done to be compatible with ng-disabled directive. But it still won’t help you if you want to enable empty select.

Also, if you manually run $('[ng-model="myPets"]').removeAttr("disabled") it won’t really help you since they are not showing native select, but rather their own div: <div class="chosen-container chosen-container-single chosen-disabled"...

So, if you really just want to make it look enabled – you can either apply this CSS:

.chosen-disabled, .chosen-disabled * {
  opacity: unset !important;
  cursor: pointer !important;
}

or this JS:

$('.chosen-disabled').removeClass('chosen-disabled')

The proper solution would be to submit an issue or PR to their repo: https://github.com/leocaseiro/angular-chosen

Answered By – Maxim Mazurok

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0