tiene - onclick jquery

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

Question

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.

Answer 1

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"; declaración en su código CSS para la clase .disabled

Answer 2

Encontré esto en esta question -

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.

Answer 3

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 .

<input type="submit" value="Submit" readonly="readonly" />

Answer 4

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!

Answer 5

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

<input type="checkbox" class="einwilligung" name="einwilligung" value="ja"/>
<div class="einwilligung_hinweis">U need to check this box</div>
<div class="button_outer">
        <input type="submit" name="submit" value="Senden" id="submitButton" disabled="disabled" class="nope btn" />
        <span class="button_overlay"></span>
 </div>

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 casilla de verificación 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

Answer 6

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:

<div id="sub-div"><input type="submit"><div>

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

Answer 7

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á

Answer 8

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

Aqui tienes ;)