Нажатие на заблокированный вход или кнопку

Можно ли щелкнуть по отключенной кнопке и предоставить некоторую обратную связь пользователю?

HTML:

<input type="button" value="click" disabled>

и JavaScript:

$('input').mousedown(function(event) {
    alert('CLICLED');
});

Приведенный выше код не работает для меня; это не так:

$('input').live('click', function () {
    alert('CLICLED');
});

Ответ 1

Невозможно зафиксировать щелчок по отключенным элементам. Лучше всего реагировать на конкретный class на элементе.

Разметка HTML:

<input type="button" class="disabled" value="click" />

Код JavaScript:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

Затем вы можете использовать стилизацию CSS для имитации отключенного вида:

.disabled
{
    background-color: #DDD;
    color: #999;
}

Здесь jsFiddle, демонстрирующий его использование.

Ответ 2

Создание поля readonly может помочь, поскольку событие click будет запущено. Хотя помните о различиях в поведении.

<input type="button" value="click" readonly="readonly" />

Ответ 3

Вы не можете обойтись без обхода, см. jQuery detect click on disabled submit button

Браузеры отключают события на отключенных элементах.

Отредактировано для добавления контекста из ссылки:

Ответчик нашел эту ветку с объяснением причин, по которым события не регистрируются: http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox и, возможно, другие браузеры, отключить DOM-события в полях формы которые отключены. Любое событие, которое начинается в отключенном поле формы, полностью отменяется и не распространяется на дерево DOM. Исправь меня если я ошибаюсь, но если вы нажмете на отключенную кнопку, источник событие является отключенной кнопкой, и событие click полностью вытер. Браузер буквально не знает, что нажата кнопка, и не пропускает событие click. Как будто вы нажимаете на черная дыра на веб-странице.

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

Ответ 4

Помещенный

input[disabled] {pointer-events:none}

в вашем CSS (он запрещает некоторым браузерам полностью отбрасывать клики на отключенные входы) и захватывать щелчок на родительском элементе. Это более чистое решение IMHO, чем наложение прозрачного наложения на элемент для захвата клика, и в зависимости от обстоятельств также может быть намного проще, чем просто "имитировать" отключенное состояние с использованием CSS (поскольку это не помешает, а также требует переопределения стиля браузера, отключенного по умолчанию.

Если у вас несколько таких кнопок, для каждого из них вам понадобится уникальный родительский элемент, чтобы иметь возможность различать, какая кнопка была нажата, потому что при pointer-events:none цель клика - это родительская кнопка, а не сама кнопка, (Или вы можете проверить координаты щелчка, я полагаю...).

Если вам нужно поддерживать старые браузеры, проверьте, какие из них поддерживают pointer-events: http://caniuse.com/#search=pointer-events

Ответ 5

Элементы

disabled не позволяют пользователю взаимодействовать с ними.

Итак: нет, вы не можете поместить кнопку onclick на кнопку disabled и ожидать, что она будет запущена.

Ответ 6

<input id="idButton" type="button" value="click" disabled>

$('#idButton').on('click', function() {
    // The button is disabled but this will be executed.
});

В приведенном выше примере работает с JQuery для отключенных кнопок, которым необходимо записать событие.

Ответ 7

вы не можете нажать на отключенную кнопку, но можете нажать на отключенную ссылку

$('.btn').on('click', function(e) {
  e.preventDefault();
  $txt = $('div.text');
  if($(this).attr('disabled')){
    $txt.html('CLICKED, BUT DISABLED!!');
  }else{
    $txt.html('Not disabled. =)');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>

Ответ 8

Вы должны использовать disabled = "disabled", а не только отключен.

$('input:disabled').val('disabled');