如何防止 Bootstrap 4 Selectpicker 打开

Posted 2023-05-08

【中文标题】如何防止 Bootstrap 4 Selectpicker 打开

【英文标题】：Howto prevent Boostrap 4 Select-Picker from opening

【发布时间】：2021-07-20 13:01:54

【问题描述】：

我有一个带有 Bootstrap-select 插件和两个按钮的 Bootstrap 4：

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

我需要防止 selectpicker 在单击一个按钮时打开，并在单击另一个按钮时将状态恢复为正常状态。

这行不通：

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

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

Than 也不起作用$('#selectpickerId').on('click'...

自定义 boostrap-select 事件正在运行，但会导致长时间滞后：

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

单独的关闭方法.selectpicker('close')今天只在v1.14.0-beta可用，所以我无法测试它。

我不能为selectpicker 使用disabled 属性，因为我需要将它的值发布到服务器。

感谢您的帮助。

【参考方案1】：

您可以在用户单击禁用按钮时禁用dropdown-toggle 按钮而不是禁用选择框，即：$(".dropdown-toggle").prop('disabled',true) 并在单击启用按钮时启用它。

演示代码：

$('#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>

【讨论】：

工作就像一个魅力，谢谢。顺便说一句：我没有看到任何带有dropdown-toggle className 的元素。我想使用class="selectpicker 会在页面上注入一些新元素，对吧？我在哪里可以阅读更多相关信息（可能是一些文档部分）？

您好，selectpicker 插件会动态生成许多元素，当您在浏览器中检查 元素选项卡 时，您可以找到这些元素。我不确定这是否存在于文档中。