web-dev-qa-db-fra.com

Bouton de désactivation de Jquery/bootstrap

Il cherchait une solution utilisant JQuery ou en modifiant la classe de démarrage Twitter pour empêcher un bouton d’effectuer son action onclick, c’est-à-dire de le désactiver. Cependant, les résultats iv trouvés jusqu’à présent n’ont pas fonctionné correctement et la plupart du temps ne donnent qu’une apparence de désactivation mais fonctionnent toujours correctement:

$("#previous").prop('disabled', true);
$("#next").prop('disabled', true);

Le but est d'empêcher le remplacement des onglets lorsque leur index est trop élevé ou trop bas. La plupart des autres solutions semblent contenir d’énormes quantités de Javascript apparemment inutile pour une fonctionnalité qui semble relativement simple.

Tel que cela :

$("#previous").click(function() {
  var me = $(this);
  me.unbind( "click");            
})

Ce qui est supposé supprimer la fonction liée signifierait toutefois également rattacher l’événement lorsque l’index de tabulation augmente. Existe-t-il une solution plus simple permettant de désactiver temporairement un bouton ou d'empêcher simplement l'exécution de l'action par défaut sans supprimer l'événement ou ne pas afficher l'élément de bouton?

Toute aide serait appréciée :)

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
6
D3181

Si vous utilisez Twitter bootstrap, il existe exactement ce comportement déjà mis en œuvre pour vous.

Il vous suffit de changer la classe .disabled de l'élément que vous souhaitez désactiver.

Comme:

$("#previous").addClass('disabled');
11
Erick Gallani

Me laisser montrer un exemple simple. Ici, un bouton devient désactivé une fois que vous cliquez dessus.

<button class="btn btn-danger">Click Me</button>

$('.btn-danger').on('click', function() {

    if ($(this).hasClass('disabled')) {
        return false;
    } else {
        $(this).addClass('disabled');
    }
});
3
Object Manipulator

Vous devrez empêcher l'action par défaut à l'aide de event.preventDefault()

$("#previous").click(function(event) {
  //add logic to attach style behavior here or conditionally prevent default
      event.preventDefault();    
});
1
Shintu Joseph