Событие на отключенном входе

Видимо отключенный <input>не обрабатывается ни одним событием

Есть ли способ обойти эту проблему?

<input type="text" disabled="disabled" name="test" value="test" />

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

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

Отключенные элементы не запускают события мыши. Большинство браузеров распространяют событие, происходящее из отключенного элемента, вверх по дереву DOM, поэтому обработчики событий могут быть размещены на элементах контейнера. Тем не менее, Firefox не демонстрирует такого поведения, он просто ничего не делает, когда вы нажимаете на отключенный элемент.

Я не могу придумать лучшего решения, но для полной кросс-браузерной совместимости вы можете поместить элемент перед отключенным вводом и поймать щелчок по этому элементу. Вот пример того, что я имею в виду:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

JQ:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

Пример: http://jsfiddle.net/RXqAm/170/ (обновлено для использования jQuery 1.7 с propвместо attr).

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

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

и вход (+ скрипт) должен быть

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})

Отключенные элементы «съедают» клики в некоторых браузерах - они не реагируют на них и не позволяют захватывать их обработчиками событий в любом месте элемента или любого из его контейнеров.

ИМХО самый простой и чистый способ «исправить» это (если вам действительно нужно захватывать клики на отключенных элементах, как это делает OP), это просто добавить следующий CSS на вашу страницу:

input[disabled] {pointer-events:none}

Это приведет к тому, что любые щелчки на отключенном входе будут попадать на родительский элемент, где вы сможете их нормально захватывать. (Если у вас есть несколько отключенных входов, вы можете захотеть поместить каждый в отдельный контейнер самостоятельно, если они еще не выложены таким образом - дополнительный <span>или <div>, скажем, - просто, чтобы было легко отличить, какой отключенный ввод была нажата).

Недостатком является то, что этот трюк, к сожалению, не работает для старых браузеров, которые не поддерживают pointer-eventsсвойство CSS. (Должно работать с IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Если вам нужна поддержка старых браузеров, вам нужно использовать один из других ответов!

Я бы предложил альтернативу - использовать CSS:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

вместо отключенного атрибута. Затем вы можете добавить свои собственные атрибуты CSS для имитации отключенного ввода, но с большим контролем.

Вместо этого disabledвы можете рассмотреть возможность использования readonly. С некоторым дополнительным CSS вы можете стилизовать ввод, чтобы он выглядел какdisabled поле.

На самом деле есть еще одна проблема. Событие changeсрабатывает только тогда, когда элемент теряет фокус, что не логично, если рассматривать disabledполе. Возможно, вы вводите данные в это поле из другого вызова. Чтобы сделать эту работу, вы можете использовать событие «связать».

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

ИЛИ сделать это с помощью jQuery и CSS!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

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

У нас сегодня была такая проблема, но мы не хотели менять HTML. Таким образом, мы использовали событие mouseenter, чтобы достичь этого

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

Я нахожу другое решение:

<input type="text" class="disabled" name="test" value="test" />

Класс "disabled" имитирует отключенный элемент по непрозрачности:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

А затем отмените событие, если элемент отключен, и удалите класс:

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

предложение здесь выглядит хорошим кандидатом на этот вопрос, а также

Выполнение события клика на отключенном элементе? Javascript JQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});