Иногда я использую якоря в стиле кнопок, а иногда просто кнопки. Я хочу отключить определенные клики, чтобы:
Как я могу это сделать?
Кнопки легко отключить, так как «disabled» - это свойство кнопки, которое обрабатывается браузером:
& Лт;!- язык: html - >
<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 ()
:
& Лт;!- язык: javascript - >
// 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 отключил кнопку и ввел демо ][2].
В противном случае вы бы использовали метод jQuery prop ()
:
$('button').prop('disabled', true);
$('button').prop('disabled', false);
& Лт; hr >
Стоит отметить, что «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
- это то, что необходимо для того, чтобы метка привязки выглядела отключенной.
& Лт;!- язык: html - >
<a href="http://example.com" class="btn">My Link</a>
Конечно, это не помешает работе ссылок при нажатии. Приведенная выше ссылка приведет нас на http://example.com. Чтобы предотвратить это, мы можем добавить простой фрагмент кода jQuery для нацеливания меток привязки с классом disabled
для вызова event.preventDefault ()
:
& Лт;!- язык: javascript - >
$('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 отключил демо-версию ссылок ][8].
& Лт; hr >
Затем мы можем расширить предыдущую функцию отключения, сделанную выше, чтобы проверить тип элемента, который мы пытаемся отключить, используя 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 ][10].
Стоит также отметить, что вышеупомянутая функция также будет работать на всех типах ввода.
Я не могу думать более простым / легким способом! ;-)
Использование якорных тегов (ссылок):
<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"/>
Например, чтобы отключить любую кнопку, нажмите кнопку «Отправить», и вам просто нужно добавить атрибут disabled as
$('input[type="submit"]').attr('disabled','disabled');
После выполнения выше строки ваш тег html кнопки отправки будет выглядеть следующим образом:
<input type="submit" class="btn" value="Submit" disabled/>
Для включения кнопки, например, когда у вас есть текст в текстовом поле. Вам нужно будет удалить атрибут disable , чтобы включить кнопку as.
if ($('#text-field').val() != '') {
$('input[type="submit"]').removeAttr('disabled');
}
Я знаю, что опаздываю на вечеринку, но специально отвечаю на два вопроса:
«Я просто хочу отключить определенные клики, чтобы: *
Как трудно это может быть?«*
Они перестают нажимать
1.& nbsp; Для кнопок типа < button >
или< input type = "button" >
вы добавляете атрибут: disabled
.
<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>
2.& NBSP; Для ссылок, ЛЮБАЯ ссылка... на самом деле, любой элемент HTML, вы можете использовать CSS3 события указателя .
.selector { pointer-events:none; }
Поддержка браузером событий указателей удивительна современным уровнем техники (5/12/14). Но мы обычно должны поддерживать устаревшие браузеры в области IE, поэтому IE10 и ниже НЕ поддерживают события указателя: http://caniuse.com/pointer-events. Таким образом, использование одного из решений JavaScript, упомянутых другими здесь, может стать способом для устаревших браузеров.
Больше информации о событиях указателя:
Они выглядят инвалидами
Очевидно, это ответ CSS, так что:
1.& NBSP; Для кнопок типа < button >
или< input type = "button" >
используйте селектор [attribute]
:
button[disabled] { ... }
input[type=button][disabled] { ... }
--
Вот базовая демонстрация с материалом, который я упомянул здесь:
Надеюсь, это поможет.
Если, как и я, вы просто хотите отключить кнопку, не пропустите простой ответ, слегка скрытый в этой длинной теме:
$("#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», чтобы они выглядели отключенными (благодаря bootstrap снова), и подключаем событие клика по умолчанию, которое предотвращает клик, возвращая false (нет необходимости). для предотвращения по умолчанию
см. здесь).
Примечание : Вам не нужно отцепывать это событие при повторном включении якорей. Простое удаление класса .disabled
делает свое дело.
Конечно, это не поможет, если вы прикрепили к ссылке пользовательский обработчик кликов, что очень часто встречается при использовании начальной загрузки и 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);
Немного раздражает, но я часто использую этот шаблон.
Отличный ответ и вклад от всех! Мне пришлось немного расширить эту функцию, чтобы включить отключение некоторых элементов:
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 (если они будут изменены) также изменят стиль для других виджетов.
Это довольно поздний ответ, однако я наткнулся на этот вопрос, ища способ отключить кнопки бустрапа после нажатия на них и, возможно, добавить приятный эффект (например, спиннер). Я нашел отличную библиотеку, которая делает именно это:
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;
}
}
Скажем, у вас есть, что выглядит так, что в настоящее время включено.
<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");
}
}