javascript - tag - noscript chrome

Haciendo clic en una entrada o botón deshabilitado

Question

¿Es posible hacer clic en un botón deshabilitado y proporcionar algún comentario al usuario?

HTML:

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

y JavaScript:

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

El código anterior no funciona para mí; tampoco es esto:

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

Answer 1

¿Qué hay de envolver el botón en algún elemento y atraparlo haciendo clic en este elemento?

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

Javascript:

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

Answer 2

Deberías usar disabled = "disabled" y no solo deshabilitado.

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

Answer 3

Hacer que el campo sea de readonly puede ayudar, ya que el evento de clic se activará. Aunque ten en cuenta las diferencias de comportamiento .

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

Answer 4

No hay manera de capturar un clic en los elementos deshabilitados. Su mejor apuesta es reaccionar a una class específica en el elemento.

Marcado HTML:

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

Código de JavaScript:

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

Luego, podría usar el estilo CSS para simular un aspecto deshabilitado:

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

Aquí hay un jsFiddle demuestra su uso.

Answer 5

No puede, sin una solución alternativa, ver: jQuery detectar hacer clic en el botón de envío deshabilitado

Los navegadores deshabilitan eventos en elementos deshabilitados.

Editado para agregar contexto desde el enlace:

El autor de la pregunta encontró este hilo con una explicación de por qué los eventos no se están registrando: http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox, y quizás otros navegadores, deshabilitan los eventos DOM en los campos de formulario que están deshabilitados. Cualquier evento que comience en el campo de formulario deshabilitado se cancela completamente y no se propaga hacia el árbol DOM. Corríjame si me equivoco, pero si hace clic en el botón deshabilitado, la fuente del evento es el botón deshabilitado y el evento de clic se elimina por completo. El navegador, literalmente, no sabe que se hizo clic en el botón, ni tampoco pasa el evento de clic. Es como si estuvieras haciendo clic en un agujero negro en la página web.

La solución alternativa sería diseñar el botón para "parecer" deshabilitado, mientras que en realidad no lo es.

Answer 6

Poner

input[disabled] {pointer-events:none}

en su CSS (evita que algunos navegadores descarten los clics en entradas deshabilitadas por completo), y captura el clic en un elemento principal. En mi humilde opinión, es una solución más limpia que colocar una superposición transparente sobre el elemento para capturar el clic, y dependiendo de las circunstancias puede ser mucho más fácil que simplemente "simular" el estado deshabilitado mediante CSS (ya que eso no evitará que la entrada sea enviado, y también requiere anular el estilo predeterminado del navegador ''deshabilitado'').

Si tiene varios botones de este tipo, necesitará un padre único para cada uno, para poder distinguir en qué botón se hizo clic, porque con pointer-events:none , el objetivo de clic es el padre del botón en lugar del botón en sí. (O puedes probar las coordenadas de clic, supongo ...).

Sin embargo, si necesita admitir navegadores más antiguos, compruebe cuáles son compatibles pointer-events : http://caniuse.com/#search=pointer-events

Answer 7

no puede hacer clic en el botón deshabilitado, pero puede hacer clic en el enlace deshabilitado

$(''.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 8

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

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

El ejemplo anterior funciona con JQuery para botones deshabilitados que necesitan que se capture el evento.

Answer 9

disabled elementos disabled no permitirán que el usuario interactúe con ellos.

Entonces: no, no puedes poner un clic en un botón disabled y esperar que se dispare.