È possibile fare clic su un pulsante disattivato e fornire un feedback all'utente?Fare clic su un ingresso o pulsante disattivato
HTML:
<input type="button" value="click" disabled>
e JavaScript:
$('input').mousedown(function(event) {
alert('CLICKED');
});
Il codice di cui sopra non funziona per me; né è questo:
$('input').live('click', function() {
alert('CLICKED');
});
Non c'è modo di catturare un clic sugli elementi disabilitati. La soluzione migliore è quella di reagire a uno specifico class sull'elemento.
Tag HTML:
<input type="button" class="disabled" value="click" />
codice JavaScript:
$('input').click(function (event) {
if ($(this).hasClass('disabled')) {
alert('CLICKED, BUT DISABLED!!');
} else {
alert('Not disabled. =)');
}
});
È quindi possibile utilizzare uno stile CSS per simulare un aspetto disabile:
.disabled
{
background-color: #DDD;
color: #999;
}
Ecco un jsFiddle dimostrando il suo utilizzo.
disabled elementi non consentono all'utente di interagire con essi.
Quindi: no, non è possibile inserire un onclick su un pulsante disabled e aspettarsi che si attivi.
Non è possibile senza una soluzione alternativa, vedi: jQuery detect click on disabled submit button
I browser disabilitare eventi in elementi disabili.
A cura di aggiungere contesto dal link:
Il richiedente ha trovato questa discussione con una spiegazione del motivo per cui gli eventi non vengono registrati: http://www.webdeveloper.com/forum/showthread.php?t=186057
Firefox, e forse altri browser, disabilitare eventi DOM su campi modulo che sono disabilitati. Qualsiasi evento che inizia nel campo modulo disabilitato è completamente annullato e non si propaga sull'albero DOM. Correggimi se ho torto, ma se clicchi sul pulsante disabilitato, la fonte di l'evento è il pulsante disabilitato e l'evento click è completamente cancellato . Il browser non sa letteralmente che il pulsante è stato cliccato, né passa l'evento click. È come se si stesse facendo clic su un buco nero nella pagina web.
La soluzione sarebbe lo stile il pulsante per "guardare" disabilitato, mentre in realtà non è così.
Fare il campo readonly può essere d'aiuto, perché l'evento click sarà attivato.Essere a conoscenza dello differences in behaviour.
<input type="button" value="click" readonly="readonly" />
<input id="idButton" type="button" value="click" disabled>
$('#idButton').on('click', function() {
// The button is disabled but this will be executed.
});
L'esempio precedente funziona con JQuery per i pulsanti disabili che hanno bisogno l'evento da catturare.
Perché pensi che funzioni? È dovuto all'ID? O perché è un pulsante? O il valore? Questo non funziona almeno su un input di testo. –
Per essere onesti, non sono sicuro, ma sospetto che sia l'ordine in cui JQuery associa il listener durante il caricamento del DOM o molto probabilmente trascura la proprietà disabilitata quando lo fa. – Lisandro
Mettere
input[disabled] {pointer-events:none}
nel CSS (previene alcuni browser da scartare clic su un totale di ingressi disabili), e catturare il click su un elemento padre. È una soluzione più pulita, IMHO, che mettere una sovrapposizione trasparente sull'elemento per catturare il clic e, a seconda delle circostanze, può anche essere molto più semplice della semplice "simulazione" dello stato disabilitato usando CSS (poiché ciò non impedirà l'input dall'essere inviato e richiede anche l'override dello stile "disabilitato" del browser predefinito).
Se si dispone di più di questi pulsanti, sarà necessario un genitore univoco per ciascuno, in modo da poter distinguere il pulsante su cui è stato fatto clic, poiché con pointer-events:none, la destinazione del clic è il padre del pulsante anziché il pulsante stesso. (Oppure potresti testare le coordinate del click, suppongo ...).
Se è necessario supportare i browser più vecchi, però, fare controllare quali supporto pointer-events: http://caniuse.com/#search=pointer-events
funziona per me in FF - la risposta più semplice e più compatibile – iPherian
non è possibile fare clic sul pulsante disattivato, ma possibile fare clic sul collegamento disabilitato
$('.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>Che dire del wraping del pulsante in alcuni elementi e del clic su questo elemento?
<span id="container">
<input type="button" value="click" disabled>
</span>
Javascript:
$("#container").click(function(){
alert("Element clicked!");
})
non credo che l'evento click saranno licenziati su un controllo disattivato –
tutti gli eventi vengono rimossi per i controlli disabili –
allora perché si disabilitato – samba