Evento su un input disabilitato

Apparentemente un disabile <input>non è gestito da nessun evento

C'è un modo per aggirare questo problema?

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

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

Qui, devo fare clic sull'input per abilitarlo. Ma se non lo attivo, l'input non dovrebbe essere pubblicato.

Gli elementi disabilitati non generano eventi del mouse. La maggior parte dei browser propagherà un evento originato dall'elemento disabilitato nella struttura DOM, quindi i gestori di eventi potrebbero essere posizionati su elementi contenitore. Tuttavia, Firefox non presenta questo comportamento, non fa assolutamente nulla quando si fa clic su un elemento disabilitato.

Non riesco a pensare a una soluzione migliore ma, per una completa compatibilità tra browser, potresti posizionare un elemento davanti all'input disabilitato e catturare il clic su quell'elemento. Ecco un esempio di cosa intendo:

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

Esempio: http://jsfiddle.net/RXqAm/170/ (aggiornato per utilizzare jQuery 1.7 con propinvece di attr).

Forse potresti rendere il campo di sola lettura e, al momento dell'invio, disabilitare tutti i campi di sola lettura

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

e l'input (+ script) dovrebbe essere

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

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

Gli elementi disabilitati "mangiano" i clic in alcuni browser: non rispondono a questi, né consentono loro di essere catturati dai gestori di eventi in qualsiasi punto dell'elemento o dei suoi contenitori.

IMHO il modo più semplice e pulito per "risolvere" questo (se in realtà è necessario acquisire clic su elementi disabilitati come fa l'OP) è solo quello di aggiungere il seguente CSS alla tua pagina:

input[disabled] {pointer-events:none}

In questo modo tutti i clic su un input disabilitato passeranno all'elemento padre, dove è possibile acquisirli normalmente. (Se hai diversi input disabilitati, potresti voler metterli ciascuno in un singolo contenitore a sé stante, se non sono già disposti in quel modo - un extra <span>o un <div>, diciamo - solo per rendere facile distinguere quale input disabilitato è stato cliccato).

Il rovescio della medaglia è che questo trucco purtroppo non funziona per i browser più vecchi che non supportano la pointer-eventsproprietà CSS. (Dovrebbe funzionare da IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Se devi supportare browser meno recenti, dovrai utilizzare una delle altre risposte!

Vorrei suggerire un'alternativa: utilizzare CSS:

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

invece dell'attributo disabilitato. Quindi, puoi aggiungere i tuoi attributi CSS per simulare un input disabilitato, ma con un maggiore controllo.

Invece di disabled, potresti prendere in considerazione l'utilizzo readonly. Con alcuni CSS extra puoi modellare l'input in modo che appaia come un disabledcampo.

In realtà c'è un altro problema. L'evento changesi innesca solo quando l'elemento perde lo stato attivo, il che non è logico considerando un disabledcampo. Probabilmente stai spingendo i dati in questo campo da un'altra chiamata. Per farlo funzionare puoi usare l'evento 'bind'.

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

O fallo con jQuery e CSS!

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

In questo modo l'aspetto dell'elemento viene disabilitato e nessun evento puntatore si attiva, tuttavia consente la propagazione e, se inviato, è possibile utilizzare l'attributo 'ignora' per ignorarlo.

Oggi abbiamo avuto un problema come questo, ma non volevamo cambiare l'HTML. Per questo abbiamo usato l' evento 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');

Trovo un'altra soluzione:

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

La classe "disabilitato" immette l'elemento disabilitato per opacità:

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

E quindi annullare l'evento se l'elemento è disabilitato e rimuovere la classe:

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

il suggerimento qui sembra un buon candidato anche per questa domanda

Stai eseguendo un evento click su un elemento disabilitato? Javascript jQuery

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