Événement sur une entrée désactivée

Apparemment, un handicapé <input>n'est géré par aucun événement

Existe-t-il un moyen de contourner ce problème?

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

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

Ici, je dois cliquer sur l'entrée pour l'activer. Mais si je ne l'active pas, l'entrée ne doit pas être publiée.

Les éléments désactivés ne déclenchent pas les événements de souris. La plupart des navigateurs propageront un événement provenant de l'élément désactivé dans l'arborescence DOM, de sorte que les gestionnaires d'événements pourraient être placés sur des éléments de conteneur. Cependant, Firefox ne présente pas ce comportement, il ne fait rien du tout lorsque vous cliquez sur un élément désactivé.

Je ne peux pas penser à une meilleure solution mais, pour une compatibilité croisée complète entre les navigateurs, vous pouvez placer un élément devant l'entrée désactivée et attraper le clic sur cet élément. Voici un exemple de ce que je veux dire:

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

Exemple: http://jsfiddle.net/RXqAm/170/ (mis à jour pour utiliser jQuery 1.7 avec propau lieu de attr).

Vous pouvez peut-être rendre le champ en lecture seule et, sur soumettre, désactiver tous les champs en lecture seule

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

et l'entrée (+ script) doit être

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

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

Les éléments désactivés "mangent" les clics dans certains navigateurs - ils ne répondent ni ne leur permettent d'être capturés par les gestionnaires d'événements n'importe où sur l'élément ou l'un de ses conteneurs.

À mon humble avis, le moyen le plus simple et le plus propre de "corriger" cela (si vous avez en fait besoin de capturer des clics sur des éléments désactivés comme le fait l'OP) consiste simplement à ajouter le CSS suivant à votre page:

input[disabled] {pointer-events:none}

Ainsi, tous les clics sur une entrée désactivée tomberont dans l'élément parent, où vous pourrez les capturer normalement. (Si vous avez plusieurs entrées désactivées, vous souhaiterez peut-être les placer chacune dans un conteneur individuel, si elles ne sont pas déjà disposées de cette façon - un supplément <span>ou un <div>, disons - juste pour faciliter la distinction entre les entrées désactivées a été cliqué).

L'inconvénient est que cette astuce ne fonctionnera malheureusement pas pour les navigateurs plus anciens qui ne prennent pas en charge la pointer-eventspropriété CSS. (Cela devrait fonctionner à partir d'IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Si vous devez prendre en charge des navigateurs plus anciens, vous devrez utiliser l'une des autres réponses!

Je suggérerais une alternative - utilisez CSS:

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

au lieu de l'attribut désactivé. Ensuite, vous pouvez ajouter vos propres attributs CSS pour simuler une entrée désactivée, mais avec plus de contrôle.

Au lieu de disabled, vous pourriez envisager d'utiliser readonly. Avec du CSS supplémentaire, vous pouvez styliser l'entrée pour qu'elle ressemble à un disabledchamp.

Il y a en fait un autre problème. L'événement changene se déclenche que lorsque l'élément perd le focus, ce qui n'est pas logique compte tenu d'un disabledchamp. Vous insérez probablement des données dans ce champ à partir d'un autre appel. Pour que cela fonctionne, vous pouvez utiliser l'événement 'bind'.

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

OU faites-le avec jQuery et CSS!

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

De cette façon, vous désactivez l'élément et aucun événement de pointeur ne se déclenche, mais il permet la propagation et s'il est soumis, vous pouvez utiliser l'attribut «ignorer» pour l'ignorer.

Nous avons eu aujourd'hui un problème comme celui-ci, mais nous ne voulions pas changer le HTML. Nous avons donc utilisé l' événement mouseenter pour y parvenir

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

Je trouve une autre solution:

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

La classe "désactivé" incite l'élément désactivé par l'opacité:

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

Et puis annulez l'événement si l'élément est désactivé et supprimez la classe:

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

la suggestion ici ressemble aussi à un bon candidat pour cette question

Vous effectuez un événement de clic sur un élément désactivé? Javascript jQuery

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