Evento em uma entrada desativada

Aparentemente, um deficiente <input>não é tratado por nenhum evento

Existe uma maneira de contornar esse problema?

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

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

Aqui, preciso clicar na entrada para habilitá-la. Mas se eu não ativá-lo, a entrada não deve ser postada.

Elementos desativados não acionam eventos do mouse. A maioria dos navegadores propagará um evento originado do elemento desativado na árvore DOM, para que os manipuladores de eventos possam ser colocados nos elementos do contêiner. No entanto, o Firefox não exibe esse comportamento, apenas não faz nada quando você clica em um elemento desativado.

Não consigo pensar em uma solução melhor, mas, para uma compatibilidade completa entre navegadores, você pode colocar um elemento na frente da entrada desativada e clicar no elemento. Aqui está um exemplo do que quero dizer:

<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();
});​

Exemplo: http://jsfiddle.net/RXqAm/170/ (atualizado para usar o jQuery 1.7 em propvez de attr).

Talvez você possa tornar o campo somente leitura e, ao enviar, desabilitar todos os campos somente leitura

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

e a entrada (+ script) deve ser

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

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

Elementos desativados "comem" cliques em alguns navegadores - eles não respondem a eles nem permitem que sejam capturados pelos manipuladores de eventos em qualquer lugar do elemento ou de seus contêineres.

IMHO, a maneira mais simples e limpa de "consertar" isso (se você realmente precisa capturar cliques em elementos desabilitados como o OP faz) é apenas adicionar o seguinte CSS à sua página:

input[disabled] {pointer-events:none}

Isso fará com que todos os cliques em uma entrada desabilitada caiam no elemento pai, onde você pode capturá-los normalmente. (Se você tiver várias entradas desativadas, poderá colocar cada uma em um contêiner individual próprio, se elas ainda não estiverem dispostas dessa maneira - uma extra <span>ou uma <div>, digamos - apenas para facilitar a distinção de quais entradas desativadas foi clicado).

A desvantagem é que, infelizmente, esse truque não funciona em navegadores antigos que não suportam a pointer-eventspropriedade CSS. (Ele deve funcionar no IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Se você precisar dar suporte a navegadores mais antigos, precisará usar uma das outras respostas!

Eu sugeriria uma alternativa - use CSS:

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

em vez do atributo desativado. Em seguida, você pode adicionar seus próprios atributos CSS para simular uma entrada desativada, mas com mais controle.

Em vez de disabled, você pode considerar usar readonly. Com algum CSS extra, você pode estilizar a entrada para que ela pareça um disabledcampo.

Na verdade, há outro problema. O evento changesomente dispara quando o elemento perde o foco, o que não é lógico considerando um disabledcampo. Provavelmente você está enviando dados para esse campo a partir de outra chamada. Para fazer isso funcionar, você pode usar o evento 'bind'.

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

OU faça isso com jQuery e CSS!

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

Dessa forma, você faz com que o elemento pareça desabilitado e nenhum evento de ponteiro será acionado, mas ele permitirá a propagação e, se enviado, você poderá usar o atributo 'ignorar' para ignorá-lo.

Hoje tivemos um problema como este, mas não queríamos mudar o HTML. Então, usamos o evento mouseenter para conseguir isso

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');

Eu encontro outra solução:

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

A classe "desabilitada" imita o elemento desabilitado por opacidade:

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

E, em seguida, cancele o evento se o elemento estiver desativado e remova a classe:

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

sugestão aqui parece um bom candidato para esta pergunta também

Realizando evento de clique em um elemento desativado? Javascript jQuery

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