Quelle est la façon la plus simple de désactiver/activer les boutons et les liens (jQuery + Bootstrap)

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

utilisant des balises D'ancrage (liens):

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

pour activer l'étiquette D'ancrage:

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

pour désactiver l'étiquette D'ancrage:

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

supposons que vous ayez le champ de texte et le bouton Soumettre,

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

handicapant:

pour désactiver n'importe quel bouton, par exemple, soumettre bouton, vous avez juste besoin d'ajouter désactivé attribut as,

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

après avoir exécuté la ligne ci-dessus, votre balise html de bouton Soumettre ressemblerait à ceci:

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

notez que l'attribut" disabled "a ajouté .

Activation:

pour activer le bouton, comme quand vous avez du texte dans le champ de texte. Vous devrez supprimer l'attribut désactivé pour activer le bouton as,

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

maintenant le code ci-dessus supprimera l'attribut "disabled".

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

"je veux juste désactiver certains clicky-les choses de la sorte:

• ils arrêtent de cliquer sur
• Ils regardent désactivé

comment cela peut-il être difficile?"

ils arrêtent de cliquer sur

1.  Pour les boutons comme <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, un lien... en fait, tout élément HTML, vous pouvez utiliser CSS3 pointer events .

.selector { pointer-events:none; }

la prise en charge du navigateur pour les événements pointeurs est impressionnante par l'état actuel de l'art (5/12/14). Mais nous devons généralement prendre en charge les anciens navigateurs dans le domaine de IE, donc IE10 et ci-dessous ne supportent pas les événements de pointeur: http://caniuse.com/pointer-events . Ainsi, l'utilisation de L'une des solutions JavaScript mentionnées par d'autres ici peut être la voie à suivre pour les navigateurs traditionnels.

plus d'informations sur les événements pointer:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

ils ont l'air handicapés

évidemment c'est une réponse CSS, donc:

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

button[disabled] { ... }

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

--

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

Espérons que cette aide.

si, comme moi, vous voulez juste désactiver un bouton, ne manquez pas la réponse simple subtilement cachée dans ce long fil:

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

@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, donc je vais adapter son code pour qu'il fonctionne comme j'en ai besoin.

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 supportent la propriété disabled et, si elles sont définies à true , elles auront l'air désactivées (grâce à bootstrap) et ne se déclencheront pas lorsque cliqué.

ancres ne supportent pas la propriété désactivée donc à la place Nous allons compter sur la classe .disabled pour les faire paraître désactivé (grâce à bootstrap de nouveau) et accrocher un événement click par défaut qui empêche le click en retournant false (pas besoin de preventDefault voir ici ).

Note : vous n'avez pas besoin de décrocher cet événement lors de la réactivation des ancres. Il suffit de supprimer la classe .disabled .

bien sûr, cela n'aide pas si vous avez attaché un gestionnaire de clic personnalisé au lien, quelque chose qui est très commun lors de l'utilisation de bootstrap et jQuery. Donc, pour faire face à cela, nous allons 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 ça simplifie un peu les choses.

notez qu'il y a un problème bizarre si vous utilisez les boutons JS de Bootstrap et l'état de chargement. Je ne sais pas pourquoi ça arrive, Mais voici comment arranger ça.

dites que vous avez un bouton et que vous le mettez à l'état de chargement:

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

Maintenant vous voulez le sortir de l'état de chargement, mais aussi le désactiver (par exemple le bouton était un bouton de sauvegarde, l'état de chargement indiquait une validation en cours et la validation échouait). Cela ressemble à reasonable Bootstrap JS:

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

malheureusement, cela va réinitialiser le bouton, mais pas le désactiver. Apparemment, button() effectue une tâche retardée. Vous devrez donc aussi reporter votre handicap:

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

Un peu ennuyeux, mais c'est un modèle que j'utilise beaucoup.

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

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

Semble fonctionner pour moi. Merci à tous!

pour ce genre de comportement, j'utilise toujours le widget jQueryUI button , Je l'utilise pour les liens et les boutons.

définit la balise dans HTML:

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

utiliser jQuery pour initialiser les boutons:

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

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

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

qui prendra soin du bouton et du comportement du curseur, mais si vous avez besoin d'aller plus loin et de changer le bouton style lorsqu'il est désactivé écrase alors les classes CSS suivantes dans votre fichier de style CSS de 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 changées) changeront le style pour les autres widgets aussi.

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

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

c'est une réponse plutôt tardive, mais je suis tombé sur cette question en cherchant un moyen de désactiver les boutons boostrap après les avoir cliqués et peut-être ajouter un effet agréable (F. e a spinner). J'ai trouvé une grande bibliothèque qui fait exactement cela:

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

vous n'incluez que les CSS et js nécessaires, ajoutez quelques propriétés à vos boutons et activez lada avec javascript... Presto ! Vos boutons ont une nouvelle vie (s'il vous plaît vérifier la démo pour voir comment il est beau) !

ce qui précède ne fonctionne pas parce que parfois

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

ajustez votre code avec

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

je sais que ma réponse est en retard, mais IMO c'est la façon la plus facile de basculer un bouton 'Activer' et bouton '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;
  }
}

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

dites que vous avez ce qui ressemble à ceci qui est actuellement enable.

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

il suffit d'ajouter ceci:

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

et vous obtiendrez ce qui désactivera le bouton

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