web-dev-qa-db-fra.com

Quel est le moyen le plus simple de désactiver / activer les boutons et les liens (jQuery + Bootstrap)

Parfois, j'utilise des ancres sous forme de boutons et parfois, je n'utilise que des boutons. Je veux désactiver des choses clicky spécifiques pour que:

  • Ils ont l'air handicapés
  • Ils cessent d'être cliqué

Comment puis-je faire ceci?

jqueryhtmlcsstwitter-bootstrap
349
biofractal

Boutons

Les boutons sont simples à désactiver car disabled est une propriété de bouton gérée par le navigateur:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
<button class="btn" disabled>My Button</button>

Pour les désactiver avec une fonction jQuery personnalisée, vous utiliseriez simplement fn.extend() :

// Disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            this.disabled = state;
        });
    }
});

// Disabled with:
$('input[type="submit"], input[type="button"], button').disable(true);

// Enabled with:
$('input[type="submit"], input[type="button"], button').disable(false);

JSFiddle désactivé bouton et entrée démo .

Sinon, vous utiliseriez la méthode prop() := de jQuery:

$('button').prop('disabled', true);
$('button').prop('disabled', false);

Tags d'ancrage

Il est à noter que disabled n'est pas un propriété valide pour les balises d'ancrage. Pour cette raison, Bootstrap utilise le style suivant pour ses éléments .btn:

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #333;
    background-color: #E6E6E6;
}

Notez comment la propriété [disabled] est ciblée ainsi qu'une classe .disabled. La classe .disabled est nécessaire pour faire en sorte qu'une balise d'ancrage semble désactivée.

<a href="http://example.com" class="btn">My Link</a>

Bien entendu, cela n'empêchera pas les liens de fonctionner lorsque vous cliquez dessus. Le lien ci-dessus nous mènera à http://example.com . Pour éviter cela, nous pouvons ajouter un simple morceau de code jQuery pour cibler les balises d'ancrage avec la classe disabled à appeler event.preventDefault() :

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

Nous pouvons basculer la classe disabled en utilisant toggleClass() :

jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            $this.toggleClass('disabled', state);
        });
    }
});

// Disabled with:
$('a').disable(true);

// Enabled with:
$('a').disable(false);

Démo de lien désactivé par JSFiddle .

Combiné

Nous pouvons ensuite étendre la fonction de désactivation précédente faite ci-dessus pour vérifier le type d'élément que nous tentons de désactiver à l'aide de is() . De cette façon, nous pouvons toggleClass() s'il ne s'agit pas d'un élément input ou button, ou basculer la propriété disabled si elle est:

// Extended disable function
jQuery.fn.extend({
    disable: function(state) {
        return this.each(function() {
            var $this = $(this);
            if($this.is('input, button, textarea, select'))
              this.disabled = state;
            else
              $this.toggleClass('disabled', state);
        });
    }
});

// Disabled on all:
$('input, button, a').disable(true);

// Enabled on all:
$('input, button, a').disable(false);

Démo complète combinée de JSFiddle .

Il est à noter que cette fonction s’appliquera également à tous les types d’entrée.

571
James Donnelly

Je ne peux pas penser à un moyen plus simple/plus facile! ;-)

Utiliser les tags d'ancrage (liens):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

Pour activer la balise d'ancrage:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

enter image description here

Pour désactiver la balise d'ancrage:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

enter image description here

46
oikonomopo

Supposons que vous ayez un champ de texte et un bouton d'envoi,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

Désactiver:

Pour désactiver un bouton, par exemple, le bouton d'envoi, il vous suffit d'ajouter l'attribut désactivé,

$('input[type="submit"]').attr('disabled','disabled');

Après avoir exécuté la ligne ci-dessus, la balise html du bouton d'envoi ressemblerait à ceci:

<input type="submit" class="btn" value="Submit" disabled/>

Notez que l'attribut 'disabled' a ajouté .

Activer:

Pour activer le bouton, comme lorsque vous avez du texte dans un champ de texte. Vous devrez supprimer l'attribut désactiver pour activer le bouton en tant que,

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

Maintenant, le code ci-dessus supprimera l'attribut 'désactivé'.

26
Sohail xIN3N

Je sais que je suis en retard à la fête, mais pour répondre spécifiquement aux deux questions:

"Je veux juste désactiver des choses spécifiques comme ceci:

  • Ils cessent de cliquer
  • Ils semblent désactivés

Comment cela peut-il être difficile? "

Ils cessent de cliquer

1. Pour les boutons tels que <button> ou <input type="button">, vous ajoutez l'attribut: disabled.

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2. Pour les liens, N'IMPORTE QUEL lien ... en fait, n'importe quel élément HTML, vous pouvez utiliser les événements de pointeur CSS3 .

.selector { pointer-events:none; }

La prise en charge des navigateurs pour les événements de pointeur est impressionnante selon les dernières avancées technologiques (12/05/14). Mais nous devons généralement prendre en charge les anciens navigateurs dans le domaine IE. IE10 et les versions antérieures NE prennent PAS en charge les événements de pointeur: http://caniuse.com/pointer-events . Ainsi, l’utilisation d’une des solutions JavaScript mentionnées par d’autres ici pourrait être la voie à suivre pour les anciens navigateurs.

Plus d'informations sur les événements de pointeur:

Ils semblent désactivés

Évidemment, ceci est une réponse CSS, donc:

1. Pour les boutons tels que <button> ou <input type="button">, utilisez le sélecteur [attribute]:

button[disabled] { ... }

input[type=button][disabled] { ... }

-

Voici une démo de base avec les éléments que j'ai mentionnés ici: http://jsfiddle.net/bXm5B/4/

J'espère que cela t'aides.

22
Ricardo Zea

Si, comme moi, vous souhaitez simplement désactiver un bouton, ne manquez pas la réponse simple cachée dans ce long fil de discussion:

 $("#button").prop('disabled', true);
16
Graham Laight

Notez qu’il ya un problème étrange si vous utilisez les boutons JS de Bootstrap et l’état de "chargement". Je ne sais pas pourquoi cela se produit, mais voici comment y remédier.

Supposons que vous ayez un bouton et que vous le configuriez à l'état de chargement:

var myButton = $('#myBootstrapButton');
myButton.button('loading');

Maintenant, vous voulez le sortir de l'état de chargement, mais également le désactiver (par exemple, le bouton était un bouton Enregistrer, l'état de chargement indiquait une validation en cours et la validation a échoué). Cela ressemble à du raisonnable Bootstrap _ JS:

myButton.button('reset').prop('disabled', true); // DOES NOT WORK

Malheureusement, cela réinitialisera le bouton mais ne le désactivera pas. Apparemment, button() exécute une tâche différée. Donc, vous devrez également reporter votre désactivation:

myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);

Un peu agaçant, mais c'est un motif que j'utilise beaucoup.

7
Henrik Heimbuerger

@James Donnelly a fourni une réponse complète qui repose sur l'extension de jQuery avec une nouvelle fonction. C'est une excellente idée, je vais donc adapter son code pour qu'il fonctionne comme je le souhaite.

Extension de jQuery 

$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'

setState=($el, state) ->
    $el.each ->
        $(@).prop('disabled', state) if $(@).is 'button, input'
        if state then $(@).addClass('disabled') else $(@).removeClass('disabled')

    $('body').on('click', 'a.disabled', -> false)

Utilisation 

$('.btn-stateful').disable()
$('#my-anchor').enable()

Le code traitera un seul élément ou une liste d'éléments.

Les boutons et les entrées prennent en charge la propriété disabled et, s'ils sont définis sur true, ils auront l'air désactivés (grâce à bootstrap) et ne se déclencheront pas lorsque l'utilisateur clique dessus.

Les ancres ne supportent pas la propriété disabled, nous allons donc nous appuyer sur la classe .disabled pour leur donner un aspect désactivé (grâce à bootstrap encore) et créer un événement de clic par défaut empêchant le cliquez en retournant false (pas besoin de preventDefault voir ici ).

Remarque : Il n'est pas nécessaire de décrocher cet événement pour réactiver les ancres. Supprimer simplement la classe .disabled fait l'affaire.

Bien sûr, cela n'aide pas si vous avez associé un gestionnaire de clics personnalisé au lien, ce qui est très courant lorsque vous utilisez bootstrap et jQuery. Nous allons donc utiliser l’extension isDisabled() pour tester la classe .disabled, comme ceci:

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # do something useful

J'espère que cela aide à simplifier un peu les choses.

7
biofractal

Grande réponse et contributions de tous! J'ai dû étendre légèrement cette fonction pour inclure la désactivation d'éléments sélectionnés:

jQuery.fn.extend({
disable: function (state) {
    return this.each(function () {
        var $this = jQuery(this);
        if ($this.is('input, button'))
            this.disabled = state;
        else if ($this.is('select') && state)
            $this.attr('disabled', 'disabled');
        else if ($this.is('select') && !state)
            $this.removeAttr('disabled');
        else
            $this.toggleClass('disabled', state);
    });
}});

Je semble travailler pour moi. Merci a tous!

6
Brandon Johnson

Pour ce type de comportement, j'utilise toujours le widget jQueryUI button, je l'utilise pour les liens et les boutons.

Définissez la balise dans HTML:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

Utilisez jQuery pour initialiser les boutons:

$("#sampleButton").button();
$("#linkButton").button();

Utilisez les méthodes de widget button pour les activer/désactiver:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

Cela prendra en charge le comportement du bouton et du curseur, mais si vous devez approfondir et modifier le style du bouton lorsqu'il est désactivé, écrasez les classes CSS suivantes dans le fichier de style CSS de votre page.

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

Mais rappelez-vous: ces classes CSS (si modifiées) modifieront également le style des autres widgets.

5
El Bayames

Ce qui suit a très bien fonctionné pour moi:

$("#button").attr('disabled', 'disabled');
3
Raptor

C’est une réponse plutôt tardive, mais j’ai trébuché sur cette question tout en cherchant un moyen de désactiver les boutons de boost, après avoir cliqué dessus, et peut-être d’ajouter un effet Nice (par exemple, une spinner). J'ai trouvé une excellente bibliothèque qui fait exactement cela:

http://msurguy.github.io/ladda-bootstrap/

Vous ne faites qu'inclure les fichiers css et js requis, ajouter des propriétés à vos boutons et activer lada avec javascript ... Presto! Vos boutons ont une nouvelle vie (consultez la démo pour voir à quel point c'est beau)!

2
Serafeim

Je sais que ma réponse est tardive, mais à notre connaissance, c'est le moyen le plus simple de basculer entre les boutons "Activer" et "Désactiver".

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}
2
jward01

Cela ne fonctionne pas parce que parfois

$(this).attr('checked') == undefined

ajustez votre code avec

if(!$(this).attr('checked') || $(this).attr('checked') == false){
2
Kiko Seijo

Disons que vous avez ce qui ressemble à ceci qui est actuellement activé.

<button id="btnSave" class="btn btn-info">Save</button>

Ajoutez simplement ceci:

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

et vous obtiendrez ce qui désactivera le bouton

<button id="btnSave" class="btn btn-primary" disabled>Save</button>
1
Apollo

Supposons que vous ayez ces boutons sur la page comme:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

Le code js:

function change(){
   var toenable = document.querySelectorAll(".byBtn");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }
}
1
Samit