Kliknięcie wyłączonego wejścia lub przycisku

Question

Czy możliwe jest kliknięcie wyłączonego przycisku i przekazanie użytkownikowi informacji zwrotnych?

HTML:

<input type="button" value="click" disabled> 

i JavaScript:

$('input').mousedown(function(event) { 
    alert('CLICKED'); 
}); 

Powyższy kod nie działa na mnie; ani to:

$('input').live('click', function() { 
    alert('CLICKED'); 
}); 

Answer 1

Nie można uzyskać kliknięcia wyłączonych elementów. Najlepiej jest zareagować na konkretny element class.

HTML Markup:

<input type="button" class="disabled" value="click" /> 

kod JavaScript:

$('input').click(function (event) { 
    if ($(this).hasClass('disabled')) { 
     alert('CLICKED, BUT DISABLED!!'); 
    } else { 
     alert('Not disabled. =)'); 
    } 
}); 

Następnie można użyć CSS stylizacji symulować niepełnosprawnego wygląd:

.disabled 
{ 
    background-color: #DDD; 
    color: #999; 
} 

Oto jsFiddle wykazując jego wykorzystanie.

Answer 2

disabled elementy nie pozwoli użytkownikowi na interakcję z nimi.

A więc: nie, nie można umieścić przycisku onclick na przycisku disabled i oczekiwać, że zostanie uruchomiony.

Answer 3

Nie można bez obejścia, patrz: jQuery detect click on disabled submit button

Przeglądarki wyłączyć wydarzeń na elementach niepełnosprawnych.

Edited by dodać kontekst z linku:

Pytający znaleźć ten wątek z wyjaśnieniem, dlaczego zdarzenia nie są rejestracji: http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox i być może innych przeglądarek, wyłącz zdarzeń DOM na pola formularza , które są wyłączone. Każde zdarzenie rozpoczynające się w polu wyłączonego formularza to całkowicie anulowane i nie rozprzestrzenia się w drzewie DOM. Popraw mnie jeśli się mylę, ale jeśli klikniesz przycisk wyłączony, źródłem wydarzenie jest wyłączony przycisk, a zdarzenie kliknięcia jest całkowicie usunięte z . Przeglądarka dosłownie nie zna kliknięcia przycisku, ani nie przekazuje zdarzenia kliknięcia. To tak, jakbyś kliknął na czarną dziurę na stronie internetowej.

Obejście problemu będzie stylem przycisku "wygląd" wyłączonym, podczas gdy w rzeczywistości tak nie jest.

Answer 4

Należy używać disabled = "wyłączone", a nie tylko wyłączone.

$('input:disabled').val('disabled'); 

Answer 5

Pomocne może być pole readonly, ponieważ zdarzenie kliknięcia zostanie uruchomione.Chociaż należy pamiętać o differences in behaviour.

<input type="button" value="click" readonly="readonly" /> 

Answer 6

<input id="idButton" type="button" value="click" disabled>

$('#idButton').on('click', function() { 
    // The button is disabled but this will be executed. 
}); 

Powyższy przykład działa z JQuery dla przycisków niepełnosprawnych, które potrzebują zdarzenie do niewoli.

Answer 7

Put

input[disabled] {pointer-events:none} 

w CSS (zapobiega kilka przeglądarek z wyrzuceniem kliknięć wejść niepełnosprawnych ogółem) i uchwycić kliknięcie na elemencie nadrzędnym. To czystsze rozwiązanie, IMHO, niż nakładanie przezroczystej nakładki na element, aby uchwycić kliknięcie, a w zależności od okoliczności może być również łatwiejsze niż "symulowanie" wyłączonego stanu za pomocą CSS (ponieważ to nie przeszkadza w wejściu przesłane, a także wymaga nadpisania domyślnego stylu "wyłączonej" przeglądarki).

Jeśli masz wiele takich przycisków, musisz mieć unikatowy nadrzędny dla każdego, aby móc odróżnić, który przycisk został kliknięty, ponieważ z pointer-events:none, celem kliknięcia jest rodzic nadrzędny przycisku, a nie sam przycisk. (Można też przetestować współrzędne kliknięcia, przypuszczam ...).

Jeśli potrzebujesz wsparcia starszych przeglądarek, choć należy sprawdzić, które ones wsparcie pointer-events: http://caniuse.com/#search=pointer-events

Answer 8

nie można kliknąć na przycisku niepełnosprawnych, ale może kliknąć na niepełnosprawnego linku

$('.btn').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $txt = $('div.text'); 
 
    if($(this).attr('disabled')){ 
 
    $txt.html('CLICKED, BUT DISABLED!!'); 
 
    }else{ 
 
    $txt.html('Not disabled. =)'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="text">No action</div> 
 
<input type="button" href="" class="btn" value="click" /> 
 
<input type="button" href="" class="btn" value="click disabled" disabled /> 
 
<a href="" class="btn">Click</a> 
 
<a href="" class="btn" disabled>Click Disabled</a>

Answer 9

Co powiecie na zawijanie przycisku w danym elemencie i kliknięcie tego elementu zamiast tego?

<span id="container"> 
    <input type="button" value="click" disabled> 
</span> 

Javascript:

$("#container").click(function(){ 
    alert("Element clicked!"); 
})