Question

我知道这很简单，但是我一直到处寻找并尝试了一些代码。我搜索的大多数代码都是如何禁用下拉列表的，该下拉列表会将我带到一系列被禁用的选择元素上。我想要的是禁用组成下拉菜单项的下拉菜单的整个按钮。我尝试无法为该程序获取正确的代码。我下面有个小提琴。 PS这只是我要禁用的一个小提琴例子。

我正在尝试：-

$(document).ready(function() {
  $('.btn-group').attr('disable', true)
});

完整的无效代码：-http://jsfiddle.net/ydxq1ue9/

Answer 1

您快到了。只需将button内的.btn-group定位为目标即可。

这样做：-

$(document).ready(function() {
  $('.btn-group button').attr('disabled','disabled');
});

运行代码：-http://jsfiddle.net/9ohwkf0u/

Answer 2

向按钮添加ID：

  <button type="button" id="buttonID" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

并称呼它：

$(document).ready(function() {
    $("#buttonID").prop("disabled", true);  
});

Answer 3

您可以将disabled类添加到<button class="btn btn-default dropdown-toggle">元素中，如下所示：

$(document).ready(function() {
  $('.btn-group button').addClass('disabled')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Answer 4

将类disabled添加到button标签中。像这样：

$('.btn-group button').addClass('disabled')

Answer 5

尝试：

$(document).ready(function() {
   $('.btn-group').css({'pointer-events':'none', "opacity" : "0.5"});
});

禁用下拉按钮

5 个答案: