Evento en una entrada deshabilitada

Aparentemente un <input>evento deshabilitado no es manejado por ningún evento

¿Hay alguna forma de solucionar este problema?

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

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

Aquí, necesito hacer clic en la entrada para habilitarla. Pero si no lo activo, la entrada no debería publicarse.

Los elementos deshabilitados no disparan eventos del mouse. La mayoría de los navegadores propagarán un evento que se origina desde el elemento deshabilitado hasta el árbol DOM, por lo que los controladores de eventos podrían ubicarse en elementos del contenedor. Sin embargo, Firefox no exhibe este comportamiento, simplemente no hace nada cuando hace clic en un elemento deshabilitado.

No puedo pensar en una solución mejor, pero, para una compatibilidad cruzada completa del navegador, podría colocar un elemento delante de la entrada deshabilitada y hacer clic en ese elemento. Aquí hay un ejemplo de lo que quiero decir:

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

Ejemplo: http://jsfiddle.net/RXqAm/170/ (actualizado para usar jQuery 1.7 con en proplugar de attr).

Tal vez podría hacer que el campo sea de solo lectura y al enviarlo deshabilite todos los campos de solo lectura

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

y la entrada (+ script) debe ser

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

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

Los elementos deshabilitados "comen" clics en algunos navegadores: no responden a ellos ni permiten que sean capturados por los controladores de eventos en cualquier parte del elemento o cualquiera de sus contenedores.

En mi humilde opinión, la forma más simple y limpia de "arreglar" esto (si realmente necesita capturar clics en elementos deshabilitados como lo hace el OP) es simplemente agregar el siguiente CSS a su página:

input[disabled] {pointer-events:none}

Esto hará que cualquier clic en una entrada deshabilitada caiga al elemento principal, donde puede capturarlos normalmente. (Si tiene varias entradas deshabilitadas, es posible que desee colocar cada una en un contenedor individual, si aún no se han presentado de esa manera, un extra <span>o un <div>, por ejemplo, solo para que sea fácil distinguir qué entrada deshabilitada fue hecho clic).

La desventaja es que este truco desafortunadamente no funcionará para los navegadores más antiguos que no admiten la pointer-eventspropiedad CSS. (Debería funcionar desde IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Si necesita admitir navegadores antiguos, deberá usar una de las otras respuestas.

Sugeriría una alternativa: use CSS:

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

en lugar del atributo deshabilitado. Luego, puede agregar sus propios atributos CSS para simular una entrada deshabilitada, pero con más control.

En lugar de disabled, podría considerar usar readonly. Con un poco de CSS adicional, puede diseñar la entrada para que se vea como un disabledcampo.

En realidad hay otro problema. El evento changesolo se dispara cuando el elemento pierde el foco, lo que no es lógico considerando un disabledcampo. Probablemente esté enviando datos a este campo desde otra llamada. Para que esto funcione, puede usar el evento 'bind'.

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

¡O haga esto con jQuery y CSS!

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

De esta manera, hace que el elemento se vea deshabilitado y no se dispararán eventos de puntero, sin embargo, permite la propagación y, si se envía, puede usar el atributo 'ignorar' para ignorarlo.

Hoy tuvimos un problema como este, pero no queríamos cambiar el HTML. Así que utilizamos el evento mouseenter para lograr eso

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

Encuentro otra solución:

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

La clase "deshabilitado" imita el elemento deshabilitado por opacidad:

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

Y luego cancele el evento si el elemento está deshabilitado y elimine la clase:

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

La sugerencia aquí parece un buen candidato para esta pregunta también

¿Realizar evento de clic en un elemento deshabilitado? Javascript jQuery

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