web-dev-qa-db-fra.com

jQuery detect cliquez sur le bouton d'envoi désactivé

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

Comme vous pouvez le constater, j’ai un formulaire avec un bouton de validation désactivé (via JavaScript). 

Je veux quand même pouvoir lier un événement de clic à celui-ci afin de pouvoir faire une indication jazzy de ce qui doit être corrigé sur l'entrée avant d'autoriser la soumission du formulaire (c'est-à-dire l'activation du bouton à nouveau).

Cependant, la désactivation du bouton d'envoi désactive apparemment tous les événements de clic liés au bouton, même s'ils sont liés après la désactivation - aucune idée de la manière de contourner ce problème?

En pratique, une solution consiste à cesser de désactiver le bouton et à créer un événement qui ne

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

Cependant, je souhaite connaître les tenants et les aboutissants des entrées désactivées et des événements javascript, et s'il existe des solutions de contournement, car je n'ai jamais rencontré ce comportement auparavant.

jqueryformssubmit
37
totallyNotLizards

Trouvé ceci dans cette question -

Firefox, et peut-être d'autres navigateurs, désactivent les événements DOM sur les champs de formulaire qui sont désactivés. Tout événement qui commence au champ de formulaire désactivé est complètement annulé et ne se propage pas dans l’arbre DOM. Corrigez-moi si je me trompe, mais si vous cliquez sur le bouton désactivé, la source de l'événement est le bouton désactivé et l'événement click est complètement anéanti. Le navigateur ignore littéralement si le bouton a été cliqué, il ne transmet pas non plus l'événement click. C'est comme si vous cliquez sur un fichier trou noir sur la page Web.

Je pensais que vous seriez peut-être en mesure de "simuler" un clic en enveloppant le bouton dans une div et en déclenchant la logique de l'événement de clic de la div. Mais, comme indiqué ci-dessus, les événements sur les éléments désactivés ne semblent pas remonter dans l'arborescence DOM. 

44
ipr101

Le meilleur moyen que j'ai trouvé de faire est d'utiliser une classe "désactivée" pour désactiver le bouton. Vous pouvez ensuite intercepter les événements de clic normalement dans jQuery. Si $(this).hasClass('disabled'), vous faites votre travail 'd'indication jazzy', avec event.preventDefault();. Une fois que l'utilisateur a terminé, vous pouvez removeClass('disabled') à partir du bouton input[type="submit"] '.'. Facile!

8
iPadDeveloper2011

Vous pouvez placer une division autour du bouton d'envoi et y associer une fonction de clic lorsque le bouton d'envoi est désactivé:

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

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

Ceci est juste du code du haut de ma tête, donc il se peut que ce ne soit pas tout à fait correct. Mais vous comprenez le point.

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

Voici ;)

2
Dobromir Penchev

Rendre le bouton readonly peut aider car l’événement click sera déclenché. Bien que soyez conscient des différences de comportement .

<input type="submit" value="Submit" readonly="readonly" />
0
Dennis Golomazov

Une autre solution de contournement associant une case à cocher obligatoire pourrait être:

<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');
      }
  });

});

Peut-être pas à la pointe de la technologie, mais ça marche plutôt bien!

  • la case à cocher doit être cochée pour donner au bouton d'envoi un indice z supérieur
  • sinon, il y a le button_overlay ci-dessus, avec un événement click, pour mettre le message en surbrillance
0
Marten Brosch

Vous devez utiliser la classe .disabled pour styler l’élément, puis le traiter comme vous le souhaitez en utilisant .hasClass ('. Disabled') dans votre code JS événements: aucun; " déclaration dans votre code css pour la classe .disabled

0
Milena Beerg