jQuery detect cliquez sur le bouton disabled submit

violon: http://jsfiddle.net/ugzux /

comme vous pouvez le voir, j'ai un formulaire avec un bouton de soumission désactivé (via javascript).

je veux être capable de lier un événement de clic à lui de toute façon, donc je peux faire une indication jazzy de ce qui doit être corrigé sur l'entrée avant que je permette au formulaire d'être soumis (I. e activez à nouveau le bouton).

cependant, désactiver le bouton Soumettre aussi apparemment tous les clics événements liés au bouton, même s'ils sont liés après le disable - une idée comment contourner cela?

pratiquement, une solution est d'arrêter de désactiver le bouton et d'avoir à la place un événement qui fait

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

cependant, je veux connaître les tenants et les aboutissants des entrées désactivées et des événements javascript, et s'il y a des solutions de rechange comme je n'ai jamais rencontré ce comportement auparavant.

36
demandé sur totallyNotLizards 2011-10-20 13:31:37

8 réponses

trouvé dans ce question -

Firefox, et peut-être d'autres navigateurs, désactivent les événements DOM sur les champs de formulaires qui sont handicapés. Tout événement qui commence au champ de formulaire est désactivé complètement annulé et ne se propage pas vers le haut de 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éantir. Navigateur littéralement ne sait pas que le bouton a été cliqué, ni passer à l'événement click sur. C'est comme si vous cliquez sur un trou noir sur la page web.

j'ai pensé que vous pourriez être en mesure de "truquer" un clic en enveloppant le bouton dans une div et en activant la logique sur l'événement de clic de div. Mais, comme indiqué ci-dessus, les événements sur désactivé éléments ne semblent pas être bouillonnait l'arborescence DOM.

42
répondu ipr101 2017-05-23 11:47:32

le meilleur moyen que j'ai trouvé pour faire ceci est d'utiliser une classe" disabled " pour désactiver le bouton. Vous pouvez alors attraper des événements de clic normalement dans jquery. Si $(this).hasClass('disabled') , vous faites votre" indication jazzy "truc, avec event.preventDefault(); une fois que l'Utilisateur a fait leur chose, vous pouvez removeClass('disabled') à partir du input[type="submit"] "bouton". Facile!

8
répondu iPadDeveloper2011 2013-08-21 05:48:13

vous pouvez mettre un div autour du bouton Soumettre et attacher une fonction de clic à celle pour quand le bouton Soumettre 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')
    }
});

c'est juste un code du haut de ma tête, donc ce n'est peut-être pas tout à fait juste. Mais vous obtenez le point.

8
répondu JackalopeZero 2015-07-24 09:09:23
$(document).on('click', '.wrapper-of-disabled-button', function(){
  if ($(this).find('button.disabled').length > 0) {
    // Do your magic on the parent -> $(this)
  }
});

vous pouvez y aller ;)

2
répondu Dobromir Penchev 2014-08-15 09:47:52

ne désactivez pas le bouton, mais empêchez de soumettre le formulaire. On dirait que vous essayez de valider le formulaire; quand vous laissez JS prendre en charge l'action soumettre, et retourner false, le formulaire ne sera pas soumettre

0
répondu Dennis Hunink 2011-10-20 09:37:07

une autre solution avec la combinaison d'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-Magie

#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 l'état de l'art, mais ça fonctionne assez bien!

  • la case à cocher doit être cochée pour donner au bouton Soumettre un index en z plus élevé
  • si non, il y a le button_overlay ci-dessus, avec un événement de clic dessus, pour mettre en évidence le message
0
répondu Marten Brosch 2012-12-05 10:31:58

en Faisant le bouton readonly peut aider, parce que l'événement de clic sera tiré. Bien qu'être conscient des différences de comportement .

<input type="submit" value="Submit" readonly="readonly" />
0
répondu Dennis Golomazov 2017-05-23 12:34:53
Vous devez utiliser

.classe désactivée à élément de style pour avoir l'air désactivé et le gérer comme vous le souhaitez en utilisant .hasClass ('.disabled') dans votre code JS. Cela devrait fonctionner aussi longtemps que vous n'avez pas mis "pointer-events: none;" déclaration dans votre code css pour .classe des handicapés

0
répondu Milena Beerg 2016-03-11 03:44:33