Какой самый простой способ отключить / включить кнопки и ссылки (jQuery + Bootstrap)

Я не могу думать проще или проще!; -)

Использование тегов привязки (ссылки):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

Чтобы включить тег Anchor:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

Чтобы отключить тег Anchor:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

Предположим, у вас есть текстовое поле и кнопка отправки,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

Отключение:

Чтобы отключить любую кнопку, например кнопку отправки, вам просто нужно добавить атрибут отключен, как,

$('input[type="submit"]').attr('disabled','disabled');

После выполнения вышеуказанной строки тэг html вашей кнопки отправки будет выглядеть так:

<input type="submit" class="btn" value="Submit" disabled/>

Обратите внимание, что добавлен атрибут disabled.

Включение:

Для кнопки включения, например, когда у вас есть текст в текстовом поле. Вам нужно будет удалить атрибут отключить, чтобы включить кнопку as,

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

Теперь приведенный выше код удалит атрибут 'disabled'.

Я знаю, что опаздываю на вечеринку, но специально отвечу на два вопроса:

"Я просто хочу отключить определенные клики, чтобы:

• Они перестают нажимать
• Они выглядят отключенными.

Как трудно это быть?

Они перестают нажимать

1. Для кнопок типа <button> или <input type="button"> вы добавляете атрибут: disabled.

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2. Для ссылок ЛЮБАЯ ссылка... на самом деле, любой элемент HTML, вы можете использовать события указателя CSS3.

.selector { pointer-events:none; }

Поддержка браузером событий указателя является удивительной по современности (5/12/14). Но мы обычно должны поддерживать устаревшие браузеры в сфере IE, поэтому IE10 и ниже НЕ поддерживают события указателя: http://caniuse.com/pointer-events. Таким образом, использование одного из решений JavaScript, упомянутых другими здесь, может быть способом перехода к устаревшим браузерам.

Дополнительная информация о событиях указателя:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

Они выглядят отключенными

Очевидно, что это ответ CSS, поэтому:

1. Для кнопок типа <button> или <input type="button"> используйте селектор [attribute]:

button[disabled] { ... }

input[type=button][disabled] { ... }

-

Вот базовая демонстрация с материалом, который я упомянул здесь: http://jsfiddle.net/bXm5B/4/

Надеюсь, что это поможет.

Если, как и я, вы просто хотите отключить кнопку, не пропустите простой ответ, тонко скрытый в этом длинном потоке:

 $("#button").prop('disabled', true);

Обратите внимание, что есть странная проблема, если вы используете кнопки Bootstrap JS и состояние загрузки. Я не знаю, почему это происходит, но вот как это исправить.

Скажите, что у вас есть кнопка, и вы установите ее в состояние загрузки:

var myButton = $('#myBootstrapButton');
myButton.button('loading');

Теперь вы хотите вывести его из состояния загрузки, но также отключить его (например, кнопка была кнопкой "Сохранить", состояние загрузки указывало на текущую проверку и не удалось выполнить проверку). Это выглядит как разумный Bootstrap JS:

myButton.button('reset').prop('disabled', true); // DOES NOT WORK

К сожалению, кнопка reset, но не отключит ее. По-видимому, button() выполняет некоторую задержанную задачу. Поэтому вам также придется отложить свое отключение:

myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);

Немного раздражает, но это шаблон, который я использую много.

@James Donnelly предоставил исчерпывающий ответ, который основан на расширении jQuery с помощью новой функции. Это отличная идея, поэтому я собираюсь адаптировать свой код, чтобы он работал так, как мне это нужно.

Расширение jQuery

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'

setState=($el, state) ->
    $el.each ->
        $(@).prop('disabled', state) if $(@).is 'button, input'
        if state then $(@).addClass('disabled') else $(@).removeClass('disabled')

    $('body').on('click', 'a.disabled', -> false)

Использование

$('.btn-stateful').disable()
$('#my-anchor').enable()

Код обрабатывает один элемент или список элементов.

Кнопки и входы поддерживают свойство disabled и, если установлены на true, они будут выглядеть отключенными (благодаря загрузке) и не будут срабатывать при нажатии.

Якоря не поддерживают отключенное свойство, поэтому вместо этого мы будем полагаться на класс .disabled, чтобы они выглядели отключенными (благодаря перезагрузке) и подключайте событие click по умолчанию, которое предотвращает щелчок, возвращая false ( нет необходимости в preventDefault см. здесь).

Примечание. Вам не нужно отбрасывать это событие при повторном включении якорей. Просто удаление класса .disabled делает трюк.

Конечно, это не поможет, если вы привязали к ссылке пользовательский обработчик кликов, что очень часто встречается при использовании bootstrap и jQuery. Поэтому для решения этой проблемы мы используем расширение isDisabled() для тестирования класса .disabled, например:

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # do something useful

Я надеюсь, что это немного упростит процесс.

Отличный ответ и вклады от всех! Мне пришлось немного расширить эту функцию, включив в нее отключение элементов:

jQuery.fn.extend({
disable: function (state) {
    return this.each(function () {
        var $this = jQuery(this);
        if ($this.is('input, button'))
            this.disabled = state;
        else if ($this.is('select') && state)
            $this.attr('disabled', 'disabled');
        else if ($this.is('select') && !state)
            $this.removeAttr('disabled');
        else
            $this.toggleClass('disabled', state);
    });
}});

Кажется, работает для меня. Спасибо всем!

Для такого поведения я всегда использую виджет jQueryUI button, я использую его для ссылок и кнопок.

Определите тег в HTML:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

Используйте jQuery для инициализации кнопок:

$("#sampleButton").button();
$("#linkButton").button();

Используйте методы виджетов button для их отключения/включения:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

Это позаботится о поведении кнопки и курсора, но если вам нужно глубже и изменить стиль кнопки при отключении, перезапишите следующие классы CSS в файле стиля CSS страницы.

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

Но помните: эти CSS-классы (если они изменены) также изменят стиль для других виджетов.

Следующее работало для меня очень хорошо:

$("#button").attr('disabled', 'disabled');

Я знаю, что мой ответ задерживается, но IMO это самый простой способ переключить кнопку "включить" и "отключить" кнопку

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}

Это выше не работает, потому что иногда

$(this).attr('checked') == undefined

скорректируйте свой код с помощью

if(!$(this).attr('checked') || $(this).attr('checked') == false){

Это довольно поздний ответ, однако я наткнулся на этот вопрос, ища способ отключить кнопки boostrap после нажатия на них и, возможно, добавить хороший эффект (f.e spinner). Я нашел отличную библиотеку, которая делает именно это:

http://msurguy.github.io/ladda-bootstrap/

Вы просто включаете необходимые css и js, добавляете некоторые свойства к своим кнопкам и включаете lada с javascript... Presto! Ваши кнопки имеют новую жизнь (пожалуйста, проверьте демонстрацию, чтобы увидеть, насколько она прекрасна)!

Скажите, что у вас есть такое, что в данный момент включено.

<button id="btnSave" class="btn btn-info">Save</button>

Просто добавьте это:

$("#btnSave").prop('disabled', true);

и вы получите это, которое отключит кнопку

<button id="btnSave" class="btn btn-primary" disabled>Save</button>

Предположим, что у вас есть эти кнопки на странице, например:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

Код js:

function change(){
   var toenable = document.querySelectorAll(".byBtn");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }
}