Was ist der einfachste Weg, um Schaltflächen und Links zu deaktivieren / aktivieren (jQuery + Bootstrap)

Manchmal verwende ich Anker, die als Knöpfe gestaltet sind, und manchmal benutze ich nur Knöpfe. Ich möchte bestimmte Clicky-Dinge deaktivieren, damit:

• Sie sehen behindert aus
• Sie werden nicht mehr angeklickt

Wie kann ich das machen?

Tasten

Schaltflächen sind einfach zu deaktivieren, ebenso disabledwie eine Schaltflächeneigenschaft, die vom Browser verarbeitet wird:

<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>

Um diese mit einer benutzerdefinierten jQuery-Funktion zu deaktivieren, verwenden Sie einfach Folgendes 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 deaktiviert Schaltfläche und Eingabe Demo .

Andernfalls würden Sie die prop()Methode von jQuery verwenden:

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

Anker-Tags

Es ist erwähnenswert, dass dies disabledkeine gültige Eigenschaft für Ankertags ist. Aus diesem Grund verwendet Bootstrap das folgende Styling für seine .btnElemente:

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

Beachten Sie, wie die [disabled]Eigenschaft sowie eine .disabledKlasse als Ziel ausgewählt werden. Die .disabledKlasse ist erforderlich, damit ein Ankertag deaktiviert erscheint.

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

Dies verhindert natürlich nicht, dass Links funktionieren, wenn Sie darauf klicken. Der obige Link führt uns zu http://example.com . Um dies zu verhindern, können wir einen einfachen Teil des jQuery-Codes hinzufügen, um Ankertags mit der disabledaufzurufenden Klasse anzuvisieren event.preventDefault():

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

Wir können die disabledKlasse umschalten , indem wir Folgendes verwenden 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);

JSFiddle deaktivierte Link-Demo .

Kombiniert

Wir können dann die oben beschriebene vorherige Deaktivierungsfunktion erweitern, um den Elementtyp zu überprüfen, mit dem wir die Deaktivierung versuchen is(). Auf diese Weise können wir, toggleClass()wenn es sich nicht um ein inputoder button-Element handelt, die disabledEigenschaft umschalten, wenn es sich um Folgendes handelt:

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

Vollständige kombinierte JSFiddle-Demo .

Es ist weiter zu beachten, dass die obige Funktion auch für alle Eingabetypen funktioniert.

Ich kann mir keinen einfacheren Weg vorstellen! ;-);

Verwenden von Anker-Tags (Links):

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

So aktivieren Sie das Anchor-Tag:

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

So deaktivieren Sie das Anchor-Tag:

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

Angenommen, Sie haben ein Textfeld und eine Schaltfläche zum Senden.

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

Deaktivieren:

Um eine Schaltfläche zu deaktivieren, z. B. die Schaltfläche "Senden", müssen Sie nur das deaktivierte Attribut hinzufügen als:

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

Nach dem Ausführen der obigen Zeile würde Ihr HTML-Tag für die Schaltfläche "Senden" folgendermaßen aussehen:

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

Beachten Sie, dass das Attribut 'disabled' hinzugefügt wurde .

Aktivieren:

Zum Aktivieren der Schaltfläche, z. B. wenn sich Text im Textfeld befindet. Sie müssen das Deaktivierungsattribut entfernen , um die Schaltfläche als zu aktivieren.

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

Jetzt entfernt der obige Code das Attribut 'disabled'.

Ich weiß, dass ich zu spät zur Party komme, aber um die beiden Fragen speziell zu beantworten:

"Ich möchte nur bestimmte Clicky-Dinge deaktivieren, damit:

• Sie hören auf zu klicken
• Sie sehen behindert aus

Wie schwer kann das sein? "

Sie hören auf zu klicken

1. Für Schaltflächen wie <button>oder <input type="button">fügen Sie das Attribut hinzu : disabled.

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

2. Für Links, JEDEN Link ... eigentlich können Sie für jedes HTML-Element CSS3- Zeigerereignisse verwenden .

.selector { pointer-events:none; }

Die Browserunterstützung für Zeigerereignisse ist nach dem heutigen Stand der Technik (12.05.14) fantastisch. Normalerweise müssen wir jedoch ältere Browser im IE-Bereich unterstützen, sodass IE10 und darunter KEINE Zeigerereignisse unterstützen: http://caniuse.com/pointer-events . Die Verwendung einer der von anderen hier erwähnten JavaScript-Lösungen ist möglicherweise der richtige Weg für ältere Browser.

Weitere Informationen zu Zeigerereignissen:

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

Sie sehen behindert aus

Offensichtlich ist dies eine CSS-Antwort, also:

1. Für Schaltflächen wie <button>oder <input type="button">verwenden Sie den [attribute]Selektor:

button[disabled] { ... }

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

- -

Hier ist eine grundlegende Demo mit den Dingen, die ich hier erwähnt habe: http://jsfiddle.net/bXm5B/4/

Hoffe das hilft.

Wenn Sie wie ich nur eine Schaltfläche deaktivieren möchten, verpassen Sie nicht die einfache Antwort, die in diesem langen Thread subtil verborgen ist:

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

@James Donnelly hat eine umfassende Antwort geliefert, die darauf beruht, jQuery um eine neue Funktion zu erweitern. Das ist eine großartige Idee, also werde ich seinen Code so anpassen, dass er so funktioniert, wie ich es brauche.

JQuery erweitern

$.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)

Verwendungszweck

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

Der Code verarbeitet ein einzelnes Element oder eine Liste von Elementen.

Schaltflächen und Eingaben unterstützen die disabledEigenschaft. Wenn truediese Option aktiviert ist , sehen sie (dank Bootstrap) deaktiviert aus und werden beim Klicken nicht ausgelöst.

Anchors unterstützen nicht die Eigenschaft disabled so stattdessen wir uns auf die verlassen werden .disabledKlasse sie deaktiviert (dank Bootstrap wieder) und Haken ein Standard - Klick - Ereignis aussehen zu lassen , dass der Klick verhindert durch falsche Rückkehr (nicht nötig preventDefaultsiehe hier ) .

Hinweis : Sie müssen dieses Ereignis nicht aushaken, wenn Sie Anker wieder aktivieren. Das einfache Entfernen der .disabledKlasse reicht aus.

Dies hilft natürlich nicht, wenn Sie einen benutzerdefinierten Klick-Handler an den Link angehängt haben, was bei der Verwendung von Bootstrap und jQuery sehr häufig vorkommt. Um damit fertig zu werden, werden wir die isDisabled()Erweiterung verwenden, um für die .disabledKlasse zu testen , wie folgt:

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

Ich hoffe, das hilft, die Dinge ein bisschen zu vereinfachen.

Beachten Sie, dass es ein seltsames Problem gibt, wenn Sie die JS-Schaltflächen von Bootstrap und den Ladezustand verwenden. Ich weiß nicht, warum dies passiert, aber hier erfahren Sie, wie Sie es beheben können.

Angenommen, Sie haben eine Schaltfläche und setzen sie in den Ladezustand:

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

Jetzt möchten Sie es aus dem Ladezustand entfernen, aber auch deaktivieren (z. B. war die Schaltfläche eine Schaltfläche Speichern, der Ladezustand zeigte eine laufende Validierung an und die Validierung schlug fehl). Dies sieht nach vernünftigem Bootstrap JS aus:

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

Leider wird dadurch die Schaltfläche zurückgesetzt, aber nicht deaktiviert. Führt anscheinend button()eine verzögerte Aufgabe aus. Sie müssen also auch Ihre Deaktivierung verschieben:

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

Ein bisschen nervig, aber es ist ein Muster, das ich oft benutze.

Tolle Antwort und Beiträge von allen! Ich musste diese Funktion leicht erweitern, um das Deaktivieren ausgewählter Elemente einzuschließen:

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

Scheint für mich zu arbeiten. Vielen Dank an alle!

Für diese Art von Verhalten verwende ich immer das jQueryUI- buttonWidget, ich verwende es für Links und Schaltflächen.

Definieren Sie das Tag in HTML:

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

Verwenden Sie jQuery, um die Schaltflächen zu initialisieren:

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

Verwenden Sie die buttonWidget-Methoden, um sie zu deaktivieren / aktivieren:

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

Dadurch wird das Verhalten von Schaltflächen und Cursoren behoben. Wenn Sie jedoch bei Deaktivierung tiefer gehen und den Schaltflächenstil ändern müssen, überschreiben Sie die folgenden CSS-Klassen in der CSS-Stildatei Ihrer Seite.

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

Aber denken Sie daran: Diese CSS-Klassen (falls geändert) ändern den Stil auch für andere Widgets.

Folgendes hat bei mir sehr gut funktioniert:

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

Dies ist eine ziemlich späte Antwort, aber ich bin auf diese Frage gestoßen, als ich nach einer Möglichkeit gesucht habe, Boostrap-Schaltflächen nach dem Klicken zu deaktivieren und möglicherweise einen schönen Effekt hinzuzufügen (z. B. einen Spinner). Ich habe eine großartige Bibliothek gefunden, die genau das tut:

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

Sie fügen nur die erforderlichen CSS und JS hinzu, fügen Ihren Schaltflächen einige Eigenschaften hinzu und aktivieren Lada mit Javascript ... Presto! Ihre Schaltflächen haben ein neues Leben (bitte sehen Sie in der Demo nach, wie schön sie ist)!

Das oben funktioniert da manchmal nicht

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

Passen Sie Ihren Code mit an

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

Ich weiß, dass meine Antwort zu spät ist, aber IMO ist dies der einfachste Weg, um die Schaltflächen "Aktivieren" und "Deaktivieren" umzuschalten.

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

Angenommen, Sie haben diese Schaltflächen auf einer Seite wie:

<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()"/>

Der js-Code:

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

Angenommen, Sie haben Folgendes, das derzeit aktiviert ist.

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

Fügen Sie einfach Folgendes hinzu:

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

und Sie erhalten dies, wodurch die Schaltfläche deaktiviert wird

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

Wenn Sie das anklickbare Element deaktivieren möchten, können Sie dies auch in HTML inline hinzufügen

style="cursor: not-allowed;"