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

Иногда я использую якоря, стилизованные под кнопки, а иногда я просто использую кнопки. Я хочу отключить определенные клики, чтобы:

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

Как я могу это сделать?

Кнопки

Кнопки просто отключить, так как disabledэто свойство кнопки, которое обрабатывается браузером:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

Чтобы отключить их с помощью пользовательской функции jQuery, вы просто должны использовать fn.extend():

// Disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle отключена кнопка и ввод демо .

В противном случае вы бы использовали prop()метод jQuery :

$('button').prop('disabled', true);
$('button').prop('disabled', false);

Якорные Теги

Стоит отметить, что disabledэто недействительное свойство для тегов привязки. По этой причине Bootstrap использует следующий стиль для своих .btnэлементов:

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

Обратите внимание, как [disabled]свойство нацелено, а также.disabled класс. .disabledКласс является то , что нужно , чтобы сделать якорь тег появится отключен.

<a href="http://example.com" class="btn">My Link</a>

Конечно, это не помешает функционированию ссылок при нажатии. Приведенная выше ссылка приведет нас к http://example.com . Чтобы предотвратить это, мы можем добавить простой кусок кода jQuery для целевых тегов привязки с disabledклассом для вызоваevent.preventDefault() :

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

Мы можем переключить disabledкласс с помощью toggleClass():

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

JSFiddle отключена ссылка демо .

комбинированный

Затем мы можем расширить предыдущую функцию отключения, сделанную выше, чтобы проверить тип элемента, который мы пытаемся отключить с помощью is(). Таким образом , мы можем , toggleClass()если это не является inputили buttonэлемент, или переключить на disabledимущество , если оно:

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

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

Полная комбинированная демонстрация JSFiddle .

Стоит также отметить, что вышеуказанная функция также будет работать на всех типах ввода.

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

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

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

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

 $('#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» добавлен .

Включение:

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

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

Якоря не поддерживают свойство disabled, поэтому вместо этого мы будем полагаться на .disabledкласс, чтобы они выглядели отключенными (благодаря загрузке снова), и подключаем событие click по умолчанию, которое предотвращает щелчок, возвращая 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');

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

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

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

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

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

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

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

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

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

Определите тег в 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 после нажатия на них и, возможно, добавить хороший эффект (например, спиннер). Я нашел отличную библиотеку, которая делает именно это:

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

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

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

$(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>

Если вы хотите отключить кликабельный, вы также можете добавить это в HTML

style="cursor: not-allowed;"