it-swarm.com.ru

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

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

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

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

348
biofractal

Кнопки

Кнопки просто отключить, так как 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 .

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

570
James Donnelly

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


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

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

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

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

enter image description here


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

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

enter image description here

45
oikonomopo

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

<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'.

26
Sohail xIN3N

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

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

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

Насколько это может быть сложно? "

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

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, упомянутых здесь другими, может быть подходом для устаревших браузеров.

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

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

Очевидно, это ответ CSS, так что:

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

button[disabled] { ... }

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

-

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

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

22
Ricardo Zea

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

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

Обратите внимание, что есть странная проблема, если вы используете 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);

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

7
Henrik Heimbuerger

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

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

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

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

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

7
biofractal

Отличный ответ и вклад от всех! Мне пришлось немного расширить эту функцию, чтобы включить отключение элементов 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);
    });
}});

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

6
Brandon Johnson

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

5
El Bayames

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

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

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

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

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

2
Serafeim

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

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

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

скорректируйте свой код с

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

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

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

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

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

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

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

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

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