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

Я не могу придумать более простой/простой способ! ;-)

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

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

чтобы включить тег привязки:

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

чтобы отключить тег привязки:

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

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

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

отключение:

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

$('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);

@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, они будут выглядеть отключенными (благодаря bootstrap) и не будут срабатывать при нажатии.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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');

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

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

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

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

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

настройте свой код с помощью

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

Я знаю, что мой ответ опоздал, но 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;
  }
}

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

<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");
    }
}

скажем, у вас есть, что выглядит так, что в настоящее время включить.

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

просто добавить это:

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

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

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