Zdarzenie na wyłączonym wejściu

Najwyraźniej wyłączone <input>nie jest obsługiwane przez żadne zdarzenie

Czy istnieje sposób obejścia tego problemu?

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

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

Tutaj muszę kliknąć dane wejściowe, aby je włączyć. Ale jeśli go nie aktywuję, dane wejściowe nie powinny być publikowane.

Wyłączone elementy nie uruchamiają zdarzeń myszy. Większość przeglądarek będzie propagować zdarzenia pochodzące z wyłączonego elementu w górę drzewa DOM, aby procedury obsługi zdarzeń mogły być umieszczane na elementach kontenera. Jednak Firefox nie wykazuje takiego zachowania, po prostu nic nie robi po kliknięciu wyłączonego elementu.

Nie mogę wymyślić lepszego rozwiązania, ale dla pełnej kompatybilności z różnymi przeglądarkami możesz umieścić element przed wyłączonym wejściem i złapać kliknięcie tego elementu. Oto przykład tego, co mam na myśli:

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

Przykład: http://jsfiddle.net/RXqAm/170/ (zaktualizowany, aby używać jQuery 1.7 propzamiast attr).

Być może możesz zrobić pole tylko do odczytu, a po przesłaniu wyłączyć wszystkie pola tylko do odczytu

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

a wejście (+ skrypt) powinno być

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

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

Wyłączone elementy „jedzą” kliknięcia w niektórych przeglądarkach - nie reagują na nie ani nie pozwalają na przechwytywanie ich przez moduły obsługi zdarzeń w dowolnym miejscu elementu lub dowolnego z jego kontenerów.

IMHO najprostszym, najczystszym sposobem na „naprawienie” tego (jeśli tak naprawdę musisz rejestrować kliknięcia na wyłączone elementy, tak jak robi to OP), wystarczy dodać następujący CSS do swojej strony:

input[disabled] {pointer-events:none}

Spowoduje to, że wszelkie kliknięcia wyłączonego wejścia przejdą do elementu nadrzędnego, gdzie można je przechwycić normalnie. (Jeśli masz kilka wyłączonych danych wejściowych, możesz chcieć umieścić każde z nich w osobnym kontenerze, jeśli nie zostały one jeszcze ułożone w ten sposób - dodatkowe <span>lub <div>, powiedzmy - tylko po to, aby ułatwić rozróżnienie, które wyłączone dane wejściowe został kliknięty).

Minusem jest to, że ta sztuczka niestety nie działa w starszych przeglądarkach, które nie obsługują pointer-eventswłaściwości CSS. (Powinien działać z IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Jeśli potrzebujesz obsługi starszych przeglądarek, musisz użyć jednej z pozostałych odpowiedzi!

Sugerowałbym alternatywę - użyj CSS:

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

zamiast atrybutu disabled. Następnie możesz dodać własne atrybuty CSS, aby zasymulować wyłączone wejście, ale z większą kontrolą.

Zamiast tego disabledmożesz rozważyć użycie readonly. Za pomocą dodatkowego CSS możesz stylizować dane wejściowe, aby wyglądały jak disabledpole.

W rzeczywistości jest inny problem. Zdarzenie jest changeuruchamiane tylko wtedy, gdy element traci fokus, co nie jest logiczne w przypadku disabledpola. Prawdopodobnie wypychasz dane do tego pola z innego połączenia. Aby to zadziałało, możesz użyć zdarzenia „bind”.

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

LUB zrób to za pomocą jQuery i CSS!

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

W ten sposób sprawiasz, że element wygląda na wyłączony i żadne zdarzenia wskaźnika nie są uruchamiane, ale umożliwia propagację, a po przesłaniu możesz użyć atrybutu „ignoruj”, aby go zignorować.

Mieliśmy dzisiaj taki problem, ale nie chcieliśmy zmieniać HTML. Aby to osiągnąć, użyliśmy zdarzenia 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');

Znajduję inne rozwiązanie:

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

Klasa „disabled” imituje wyłączony element przez krycie:

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

A następnie anuluj zdarzenie, jeśli element jest wyłączony i usuń klasę:

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

sugestia tutaj również wygląda na dobrego kandydata na to pytanie

Wykonujesz zdarzenie kliknięcia na wyłączonym elemencie? JavaScript jQuery

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