jquerybootstrap-4bootstrap-selectbootstrap-selectpicker

Howto prevent Boostrap 4 Select-Picker from opening

I have a Bootstrap 4 with Bootstrap-select plugin and two buttons:

<div>
    <button id="disableButtonId">Disable selectpicker<button/>
    <button id="enableButtonId">Enable selectpicker<button/>
    <select id="selectpickerId" class="selectpicker" multiple title="Select option">
        <option value=1>@Option 1</option>
        <option value=2>@Option 2</option>
        <option value=3>@Option 3</option>
        <option value=4>@Option 4</option>
    </select>
</div>

I need to prevent selectpicker from opening on one button click and revert state to normal on another button click.

That doesn't work:

<script>
     $('#disableButtonId').on('click', function (e) {
          $('#selectpickerId').on('mousedown', function (e) { 
               e.preventDefault(); 
          });           
     });

     $('#enableButtonId').on('click', function (e) {
          $('#selectpickerId').off('mousedown');           
     });
</script>

Than is not also working $('#selectpickerId').on('click'...

Custom boostrap-select event is working, but results in long lags:

$('#disableButtonId').on('click', function (e) {
     $('#selectpickerId').on('show.bs.select', function (e) { 
          $('#selectpickerId').selectpicker('toggle'); 
     });           
});

Separate close method .selectpicker('close') is available only in v1.14.0-beta for today so I cannot test it.

I cannot use disabled attribute for selectpicker because I need it's value to be posted to server.

So any help is appreciated.

Solution

  • Instead of disabling select-box you can disable dropdown-toggle button whenever user click on disable button i.e : $(".dropdown-toggle").prop('disabled',true) and enable it when enable button is clicked.

    Demo Code :

    $('#disableButtonId').on('click', function(e) {
  $(".dropdown-toggle").prop('disabled', true); //disable button
});

$('#enableButtonId').on('click', function(e) {
  $(".dropdown-toggle").prop('disabled', false); //enable it
});
//for testing(to know if value gets pass or not if disabled.)
//select some value inside selectpicker -> click on disable button ->then click on save
$('[name=save]').on('click', function(e) {
  console.log($(this).closest("form").serialize())
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<form>
  <button id="disableButtonId" type="button">Disable selectpicker</button>
  <button id="enableButtonId" type="button">Enable selectpicker</button>
  <select id="selectpickerId" class="selectpicker" multiple name="select" title="Select option">
    <option value=1>@Option 1</option>
    <option value=2>@Option 2</option>
    <option value=3>@Option 3</option>
    <option value=4>@Option 4</option>
  </select>
  <button type="button" name="save">Save</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>