如何防止 Bootstrap 4 Select-Picker 打开
Howto prevent Boostrap 4 Select-Picker from opening
我有一个 Bootstrap 4,带有 Bootstrap-select 插件和两个按钮:
<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>
我需要防止 select选择器在单击一个按钮时打开并在单击另一个按钮时恢复正常状态。
那行不通:
<script>
$('#disableButtonId').on('click', function (e) {
$('#selectpickerId').on('mousedown', function (e) {
e.preventDefault();
});
});
$('#enableButtonId').on('click', function (e) {
$('#selectpickerId').off('mousedown');
});
</script>
比也行不通 $('#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
属性,因为我需要将它的值发布到服务器。
非常感谢任何帮助。
您可以在用户单击禁用按钮时禁用 dropdown-toggle
按钮,而不是禁用 select-框,即:$(".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>
我有一个 Bootstrap 4,带有 Bootstrap-select 插件和两个按钮:
<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>
我需要防止 select选择器在单击一个按钮时打开并在单击另一个按钮时恢复正常状态。
那行不通:
<script>
$('#disableButtonId').on('click', function (e) {
$('#selectpickerId').on('mousedown', function (e) {
e.preventDefault();
});
});
$('#enableButtonId').on('click', function (e) {
$('#selectpickerId').off('mousedown');
});
</script>
比也行不通 $('#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
属性,因为我需要将它的值发布到服务器。
非常感谢任何帮助。
您可以在用户单击禁用按钮时禁用 dropdown-toggle
按钮,而不是禁用 select-框,即:$(".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>