Ereignis bei einem deaktivierten Eingang

Anscheinend ein Behinderter <input> von keinem Ereignis behandelt

Gibt es eine Möglichkeit, dieses Problem zu umgehen?

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

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

Hier muss ich auf den Eingang klicken, um ihn zu aktivieren. Wenn ich es jedoch nicht aktiviere, sollte die Eingabe nicht veröffentlicht werden.

Deaktivierte Elemente lösen keine Mausereignisse aus. Die meisten Browser verbreiten ein Ereignis, das vom deaktivierten Element stammt, im DOM-Baum, sodass Ereignishandler auf Containerelementen platziert werden können. Firefox zeigt dieses Verhalten jedoch nicht, es macht überhaupt nichts, wenn Sie auf ein deaktiviertes Element klicken.

Ich kann mir keine bessere Lösung vorstellen, aber für eine vollständige Cross-Browser-Kompatibilität können Sie ein Element vor die deaktivierte Eingabe stellen und den Klick auf dieses Element abfangen. Hier ist ein Beispiel dafür, was ich meine:

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

Beispiel: http://jsfiddle.net/RXqAm/170/ (aktualisiert, um jQuery 1.7 mit propanstelle von zu verwenden attr).

Möglicherweise können Sie das Feld schreibgeschützt machen und beim Senden alle schreibgeschützten Felder deaktivieren

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

und die Eingabe (+ Skript) sollte sein

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

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

Deaktivierte Elemente "essen" Klicks in einigen Browsern - sie reagieren weder auf sie noch erlauben sie, dass sie von Ereignishandlern irgendwo auf dem Element oder einem seiner Container erfasst werden.

IMHO ist der einfachste und sauberste Weg, dies zu "beheben" (wenn Sie tatsächlich Klicks auf deaktivierte Elemente erfassen müssen, wie es das OP tut), einfach das folgende CSS zu Ihrer Seite hinzuzufügen:

input[disabled] {pointer-events:none}

Dadurch werden alle Klicks auf eine deaktivierte Eingabe auf das übergeordnete Element übertragen, wo Sie sie normal erfassen können. (Wenn Sie mehrere deaktivierte Eingaben haben, möchten Sie möglicherweise jede in einen eigenen Container einfügen, sofern diese nicht bereits so angeordnet sind - beispielsweise eine zusätzliche <span>oder eine <div>-, um die Unterscheidung der deaktivierten Eingaben zu vereinfachen wurde angeklickt).

Der Nachteil ist, dass dieser Trick leider nicht für ältere Browser funktioniert, die die pointer-eventsCSS-Eigenschaft nicht unterstützen . (Es sollte von IE 11, FF v3.6, Chrome v4 funktionieren): funktionieren caniuse.com/#search=pointer-events

Wenn Sie ältere Browser unterstützen müssen, müssen Sie eine der anderen Antworten verwenden!

Ich würde eine Alternative vorschlagen - verwenden Sie CSS:

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

anstelle des deaktivierten Attributs. Anschließend können Sie Ihre eigenen CSS-Attribute hinzufügen, um eine deaktivierte Eingabe zu simulieren, jedoch mit mehr Kontrolle.

Stattdessen disabledkönnten Sie die Verwendung in Betracht ziehen readonly. Mit etwas zusätzlichem CSS können Sie die Eingabe so gestalten, dass sie wie eine aussiehtdisabled Feld .

Es gibt tatsächlich ein anderes Problem. Das Ereignis wird changenur ausgelöst, wenn das Element den Fokus verliert, was unter Berücksichtigung eines disabledFeldes nicht logisch ist. Wahrscheinlich schieben Sie Daten von einem anderen Anruf in dieses Feld. Damit dies funktioniert, können Sie das Ereignis 'bind' verwenden.

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

ODER machen Sie dies mit jQuery und CSS!

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

Auf diese Weise wird das Element deaktiviert und es werden keine Zeigerereignisse ausgelöst. Es ermöglicht jedoch die Weitergabe. Wenn es übermittelt wird, können Sie es mit dem Attribut 'ignorieren' ignorieren.

Wir hatten heute ein solches Problem, aber wir wollten den HTML-Code nicht ändern. Deshalb haben wir das mouseenter- Ereignis verwendet, um dies zu erreichen

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

Ich finde eine andere Lösung:

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

Klasse "disabled" imitiert deaktiviertes Element durch Deckkraft:

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

Brechen Sie das Ereignis ab, wenn das Element deaktiviert ist, und entfernen Sie die Klasse:

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

Der Vorschlag hier scheint auch für diese Frage ein guter Kandidat zu sein

Klickereignis für ein deaktiviertes Element ausführen? Javascript jQuery

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