truckingsim / Ajax-Bootstrap-Select

This uses the bootstrap-select plugin and extends it so that you can use a remote source to search.
MIT License
280 stars 97 forks source link

If disabled is set initially on the select, removing it doesn't work #176

Closed ppazos closed 4 years ago

ppazos commented 5 years ago

The issue is when a select has a disabled attribute and ajax select is applied, a disabled class is added to a wrapper div.bootstrap-select that contains the select. Then if we want to remove the disabled to enable the ajax search, that should be done on the wrapper and in the the select.

It would be useful to have a .ajaxSelectPicker('enable') / .ajaxSelectPicker('disable') kind of function that applies the enable/disable to the correct DOM element, instead of manually adding and removing attributes and classes from dynamic DOM elements.

Also detected the plugin adds disabled attribute and class to the button when the initial select is disabled:

<button type="button" class="btn dropdown-toggle disabled bs-placeholder btn-light" data-toggle="dropdown" role="button" data-id="referred_to_id" tabindex="-1" aria-disabled="true" title="Start typing to search"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Start typing to search</div></div> </div></button>

markhalliwell commented 4 years ago

This plugin is an extension of bootstrap-select, which handles the wrapper and dropdown (mostly).

There is an example of how to do this here: https://developer.snapappointments.com/bootstrap-select/methods/#selectpickerrefresh

$('.ex-disable').click(function () {
  $('.disable-example').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});

$('.ex-enable').click(function () {
  $('.disable-example').prop('disabled', false);
  $('.disable-example').selectpicker('refresh');
});