Как в bootstap -3 сделать button disabled?

Question

[Дмитрий Куликов]

В bootstape есть возможность заменить переключатели кнопками getbootstrap.com/javascript/#buttons

Работает как нужно, но не могу понять, возможно ли сделать кнопку неактивной если на переключателе есть атрибут disabled

Помогла данная конструкция

$('.btn.disabled').on('click',function(e){e.stopPropagation();})

Answer 1

[Михаил Чирский]

В CSS есть замечательное свойство

.disabled {
    pointer-events: none;
}

Оно полностью блокирует любое событие, включая скрипты

Comments

[Дмитрий Куликов]

И параллельно блокирует эффект disabled кнопки

[Михаил Чирский]

Дмитрий Куликов: Что вы имеете ввиду? сделал класс написал там к примеру opacity: .5 и выглядит как дизеблед, и не работают скрипты, ну я с удовольствием выслушаю вашу реализацию, которая запретит события на CSS или что то подобное.

[Дмитрий Куликов]

Ну вопрос был задан про конкретный fraemwork, и в нем на disabled кнопках появляется новый курсор, данный эффект блокирует такое поведение, и как я считаю это очень нехорошо, в своем вопросе, я написал решение которое решило данную проблему, но сомневаюсь что оно будет работать всегда, так как не особо знаю как задавать порядок обработчиков

Answer 2

[Семен]

Насколько я знаю, из коробки - нет. Можно свою реализацию сделать :)

Comments

[Дмитрий Куликов]

Сейчас сам подставляю disabled в класс кнопки, но вот думал bootstap умеет его подставлять куда нужно

[Семен]

На это есть баг (закрытый) в бутстрапе - пишут что нужно самим это обрабатывать. https://github.com/twbs/bootstrap/issues/15696

Answer 3

[Алексей]

Почему же нет, дописывайте disabled="disabled" и кнопка не активна.

Вот вам не активная кнопка из Вашего примера

<button disabled="disabled" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button>

Соори. Про переключатели я не прочитал. Для переключателя код дает сделать его не активным, но JS отрабатывает.

<label class="btn btn-primary"  disabled="disabled">
  <input type="radio" name="type_edit" id="option2" autocomplete="off">Изменить
</label>

Был не прав относительно переключателя.

Comments

[Семен]

Если использовать список то там не кнопка а checkbox и обработка выполняется скриптом, который вроде игнорирует свойство disabled.

[Алексей]

Дмитрий Куликов: Тогда на основе каких тегов вы организуете переключатели?

[Дмитрий Куликов]

Ниже написал пример

Answer 4

[Дмитрий Куликов]

<label class="btn btn-primary disabled">
	<input disabled="disabled" type="radio" name="type_edit" id="option2" autocomplete="off">Изменить
</label>

Так как комментарий не дает вставить код напишу отдельно, интересует подобная конструкция, и неактивная кнопка в ней