Иногда я использую якоря в виде кнопок, а иногда я просто использую кнопки. Я хочу отключить определенные клики, чтобы:
- Они выглядят отключенными.
- Они перестают быть нажатыми
Как я могу это сделать?
Самый простой способ отключить/включить кнопки и ссылки (jQuery + Bootstrap)
Ответ 1
Кнопки
Кнопки легко отключить, поскольку 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 и входная демонстрация.
В противном случае вы можете использовать метод jQuery prop():
$('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.
Следует также отметить, что указанная выше функция также будет работать на всех типах ввода.
Ответ 2
Я не могу думать проще или проще!; -)
Использование тегов привязки (ссылки):
<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');
Ответ 3
Предположим, у вас есть текстовое поле и кнопка отправки,
<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'.
Ответ 4
Я знаю, что опаздываю на вечеринку, но специально отвечу на два вопроса:
"Я просто хочу отключить определенные клики, чтобы:
- Они перестают нажимать
- Они выглядят отключенными.
Как трудно это быть?
Они перестают нажимать
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/
Надеюсь, что это поможет.
Ответ 5
Если, как и я, вы просто хотите отключить кнопку, не пропустите простой ответ, тонко скрытый в этом длинном потоке:
$("#button").prop('disabled', true);
Ответ 6
@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
Я надеюсь, что это немного упростит процесс.
Ответ 7
Обратите внимание, что есть странная проблема, если вы используете кнопки 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);
Немного раздражает, но это шаблон, который я использую много.
Ответ 8
Отличный ответ и вклады от всех! Мне пришлось немного расширить эту функцию, включив в нее отключение элементов:
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);
});
}});
Кажется, работает для меня. Спасибо всем!
Ответ 9
Для такого поведения я всегда использую виджет 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-классы (если они изменены) также изменят стиль для других виджетов.
Ответ 10
Следующее работало для меня очень хорошо:
$("#button").attr('disabled', 'disabled');
Ответ 11
Это довольно поздний ответ, однако я наткнулся на этот вопрос, ища способ отключить кнопки boostrap после нажатия на них и, возможно, добавить хороший эффект (f.e spinner). Я нашел отличную библиотеку, которая делает именно это:
http://msurguy.github.io/ladda-bootstrap/
Вы просто включаете необходимые css и js, добавляете некоторые свойства к своим кнопкам и включаете lada с javascript... Presto! Ваши кнопки имеют новую жизнь (пожалуйста, проверьте демонстрацию, чтобы увидеть, насколько она прекрасна)!
Ответ 12
Это выше не работает, потому что иногда
$(this).attr('checked') == undefined
скорректируйте свой код с помощью
if(!$(this).attr('checked') || $(this).attr('checked') == false){
Ответ 13
Я знаю, что мой ответ задерживается, но 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;
}
}
Ответ 14
Предположим, что у вас есть эти кнопки на странице, например:
<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");
}
}
Ответ 15
Скажите, что у вас есть такое, что в данный момент включено.
<button id="btnSave" class="btn btn-info">Save</button>
Просто добавьте это:
$("#btnSave").prop('disabled', true);
и вы получите это, которое отключит кнопку
<button id="btnSave" class="btn btn-primary" disabled>Save</button>