Отключить выпадающую кнопку

Question

Я знаю, это очень просто, но я искал везде и пробовал некоторые коды. Большинство кодов, которые я искал, были о том, как отключить выпадающий список, который отправил бы меня на ряд отключаемых элементов выбора. То, что я хочу, это отключить всю кнопку выпадающего списка, который составляет выпадающие элементы. Я пытался не получить правильные коды для программы. У меня есть скрипка ниже. PS Это только примерная скрипка, которую я хочу отключить.

Я пытаюсь это: -

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

полный нерабочий код: - http://jsfiddle.net/ydxq1ue9/

Answer 1

попробуйте это:

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

Answer 2

Добавить идентификатор на кнопку:

  <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. Вот так:

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

Answer 4

Вы почти у цели. Просто нацельтесь на button внутри .btn-group.

Сделай так: -

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

Рабочий код: - http://jsfiddle.net/9ohwkf0u/

Answer 5

Вы можете добавить 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>