[英]How can I disable bootstrap dropdown list
I made a dropdown list using bootstrap.Dynamically I want to disable and enable the dropdown list.我使用 bootstrap 创建了一个下拉列表。动态地,我想禁用和启用下拉列表。
html code: html 代码:
<div class="span3 offset1">
<select name="primary" class="select-block" id="select_alert" style="display: none;">
<option "selected"="">Choose Alert T</option>
<option value="T1">T1</option>
<option value="T2">T2</option>
<option value="T3">T3</option>
<option value="T4">T4</option>
</select>
<div class="btn-group select select-block">
<i class="dropdown-arrow dropdown-arrow-primary"></i>
<button class="btn dropdown-toggle clearfix btn-primary" data-toggle="dropdown" id="select_alert">
<span class="filter-option pull-left">Choose Alert T</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-primary" role="menu">
<li rel="0" class="selected">
<a tabindex="-1" href="#" class="">
<span class="pull-left">Choose Alert T</span>
</a>
</li>
<li rel="1">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T1</span>
</a>
</li>
<li rel="2">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T2</span></a>
</li>
<li rel="3">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T3</span>
</a>
</li>
<li rel="4">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T4</span>
</a>
</li>
</ul>
</div>
</div>
some times I want to disable and sometimes I want to enable.So How can I do this.有时我想禁用,有时我想启用。所以我该怎么做。 In this I have 2 more dropdown elemnts.All are placed in singlw div
tag.Here I didn't mention that div
tag id name.I just putted single dropdown element code.在这个我有2个下拉元素。所有都放在singlw div
标签中。这里我没有提到那个div
标签id名称。我只是放了单个下拉元素代码。
Yes, by jquery you can get this: 是的,通过jquery您可以得到以下信息:
Here is the example: 这是示例:
http://jsfiddle.net/jV7ye/ http://jsfiddle.net/jV7ye/
$(document).ready(function() {
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", true);
} else {
$("#dropdown").prop("disabled", false);
}
});
});
UPDATED JS CODE as per your need: 根据您的需要更新了 JS代码:
$(document).ready(function() {
if(!$("#chkdwn2").is(":checked"))
{
$("#dropdown").prop("disabled",true);
}
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", false);
} else {
$("#dropdown").prop("disabled", true);
}
});
});
Replace dropdown
id with your id. 用您的ID替换dropdown
ID。 Thanks 谢谢
By using jquery we can do 通过使用jQuery,我们可以做到
Disable Dropdown 禁用下拉菜单
$('.select_alert').attr('data-toggle','');
Enable Dropdown 启用下拉
$('.select_alert').attr('data-toggle','dropdown');
If above solutions does not work for you, the try如果上述解决方案不适合您,请尝试
$('#yourDropDownElement').prop('disabled', true).trigger('chosen:updated');
I'm using boostrap v 3.3.6我正在使用 boostrap v 3.3.6
You can do this by add if block on the property and add disabled class to the drop down. 您可以通过在属性上添加if块并在下拉列表中添加禁用的类来实现。
below is my div in that i have eanbled/disabled dropdown toggle button on IsNewEditDisabled 下面是我的div,因为我在IsNewEditDisabled上启用了/禁用了下拉切换按钮
<button ng-if="!IsNewEditDisabled" class="btn dropdown-toggle" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>
<button ng-if="IsNewEditDisabled" class="btn dropdown-toggle disabled" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.