jQuery detectar haz clic en el botón de enviar desactivado

Fiddle: http://jsfiddle.net/ugzux/

Como puede ver, tengo un formulario con un botón de envío deshabilitado (a través de javascript).

De todos modos, quiero poder enlazar un evento de clic, así que puedo hacer algunas indicaciones alentadoras de lo que se debe corregir en la entrada antes de permitir que se envíe el formulario (es decir, volver a habilitar el botón).

Sin embargo, deshabilitar el botón Enviar también desactiva aparentemente cualquier evento de clic vinculado al botón, incluso si están vinculados después de la desactivación, ¿alguna idea de cómo evitar esto?

Prácticamente, una solución es dejar de deshabilitar el botón y tener un evento que lo haga

$('form').submit(function(event){ event.preventDefault(); }); 

Sin embargo, quiero saber los pormenores de entradas inhabilitadas y eventos javascript, y si hay soluciones provisionales ya que nunca antes había visto este comportamiento.

Encontré esto en esta pregunta –

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 desactivado se cancela por completo y no se propaga por el árbol DOM. Corrígeme si me equivoco, pero si haces clic en el botón deshabilitado, el origen del evento es el botón deshabilitado y el evento click se anula por completo. El navegador literalmente no sabe que se hizo clic en el botón, ni pasa el evento click. Es como si estuvieras haciendo clic en un agujero negro en la página web.

Pensé que podrías ser capaz de ‘falsear’ un clic al colocar el botón en un div y activar la lógica en el evento click del div. Pero, como se indicó anteriormente, los eventos en los elementos desactivados no parecen estar borboteando en el árbol DOM.

La mejor manera que he encontrado para hacer esto es usar una clase “deshabilitada” para deshabilitar el botón. A continuación, puede ver los eventos de clic normalmente en jquery. Si $(this).hasClass('disabled') , usted hace su ‘indicación de jazz’, junto con event.preventDefault(); Una vez que el usuario ha hecho lo suyo, puede removeClass('disabled') de la input[type="submit"] ‘button’. ¡Fácil!

Puede poner un div alrededor del botón de enviar y adjuntar una función de clic a la de cuando el botón de enviar está deshabilitado:

 
$('sub-div').click(function(event){ if (attr('submit-button', 'disabled') == 'true') { alert('Button Disabled') } });

Este es solo un código de la parte superior de mi cabeza, por lo que podría no ser exactamente correcto. Pero usted consigue el punto.

 $(document).on('click', '.wrapper-of-disabled-button', function(){ if ($(this).find('button.disabled').length > 0) { // Do your magic on the parent -> $(this) } }); 

Aqui tienes 😉

Simplemente no deshabilite el botón, pero evite enviar el formulario. Parece que estás intentando validar el formulario; cuando deja que JS se haga cargo de la acción de envío y devuelve falso, el formulario no se enviará

Otra solución con la combinación de una checkbox requerida podría ser:

  
U need to check this box

CSS-Magic

 #submitButton{ display:inline-block; color:#D00019; width:160px; z-index:30; position:absolute; display:block; top:0; left:0; height:30px; outline:none; } #submitButton.nope{ z-index:10; color:#333; } .button_outer { width:162px; height:32px; z-index:50; position:relative; } span.button_overlay{ display:block; height:30px; width:162px; position:absolute; top:0; left:0; background:#fff; opacity:0.3; filter: alpha(opacity=30); z-index:20; } .einweilligung_hinweis_error{ color:red; } 

JQuery-Stuff

 (document).ready(function() { $('.einwilligung').click(function() { var buttonsChecked = $('.einwilligung:checked'); if (buttonsChecked.length) { $('#submitButton').removeAttr('disabled'); $('#submitButton').removeClass('nope'); $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error'); } else { $('#submitButton').attr('disabled', 'disabled'); $('#submitButton').addClass('nope'); } }); $('.button_outer').click(function(){ if($('#submitButton').hasClass('nope')){ $('.einwilligung_hinweis').addClass('einweilligung_hinweis_error'); }else{ $('.einwilligung_hinweis').removeClass('einweilligung_hinweis_error'); } }); }); 

Tal vez no sea del estado de la técnica, ¡pero funciona bastante bien!

  • la checkbox debe verificarse para darle al botón de envío un índice Z más alto
  • si no, está el button_overlay anterior, con un evento de clic sobre él, para resaltar el mensaje

Hacer que el botón sea de readonly puede ser útil, ya que se activará el evento de clic. Aunque tenga en cuenta las diferencias en el comportamiento .

  

Debería usar la clase .disabled para que el elemento de estilo parezca deshabilitado y luego manejarlo como desee usando .hasClass (‘. Disabled’) en su código JS. Debería funcionar siempre y cuando no pusiera “pointer-events: none”; statement en su código CSS para la clase .disabled