如何禁用 Bootstrap 下拉列表

hlswsv35 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(4)|浏览(248)

我用bootstrap做了一个下拉列表。我想动态地禁用和启用下拉列表。
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>&nbsp;
    <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>

有时候我想禁用，有时候我想启用。那么我该怎么做呢？在这里我有2个下拉元素。所有都放在一个div标签中。这里我没有提到div标签的id名称。我只是放了一个下拉元素的代码。

twitter-bootstrap

来源：https://stackoverflow.com/questions/19589316/how-can-i-disable-bootstrap-dropdown-list

4条答案

按热度按时间

30byixjq1#

是的，通过jquery可以得到：
下面是示例：
http://jsfiddle.net/jV7ye/

$(document).ready(function() {
    $("#chkdwn2").click(function() {
       if ($(this).is(":checked")) { 
          $("#dropdown").prop("disabled", true);
       } else {
          $("#dropdown").prop("disabled", false);  
       }
    });
});

根据您的需要更新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);  
           }
        });
    });

将dropdown id替换为您的id。谢谢

赞(0）回复(0）举报 2022-12-08

i7uaboj42#

By using jquery we can do
Disable Dropdown

$('.select_alert').attr('data-toggle','');

Enable Dropdown

$('.select_alert').attr('data-toggle','dropdown');

赞(0）回复(0）举报 2022-12-08

dy1byipe3#

如果以上解决方案对您不起作用，请尝试

$('#yourDropDownElement').prop('disabled', true).trigger('chosen:updated');

我使用的是boostrap 3.3.6版

赞(0）回复(0）举报 2022-12-08

xoefb8l84#

您可以通过在属性上添加if块并在下拉列表中添加disabled类来完成此操作。
下面是我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>

赞(0）回复(0）举报 2022-12-08

我来回答

如何禁用 Bootstrap 下拉列表

4条答案

相关问题

热门标签

最新问答