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

Question

Manchmal benutze ich Ankers als Buttons gestylt und manchmal benutze ich einfach Buttons. ich möchte bestimmte klickbare Elemente deaktivieren, damit:

• Sie deaktiviert aussehen
• Sie nicht mehr angeklickt werden können

Wie kann ich das tun?

Answer 1

Schaltflächen

Schaltflächen sind einfach zu deaktivieren, da disabled eine Eigenschaft von Schaltflächen ist, die vom Browser behandelt wird:

Meine Schaltfläche

Um diese mit einer benutzerdefinierten jQuery-Funktion zu deaktivieren, müssten Sie einfach fn.extend() verwenden:

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

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

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

JSFiddle deaktivierte Schaltfläche und Eingabe-Demo.

Andernfalls könnten Sie die prop()-Methode von jQuery verwenden:

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

---

Anker-Tags

Es ist erwähnenswert, dass disabled kein gültige Eigenschaft für Anker-Tags ist. Aus diesem Grund verwendet Bootstrap das folgende Styling für seine .btn Elemente:

.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 auch die Eigenschaft [disabled] sowie eine .disabled Klasse angesprochen wird. Die .disabled Klasse ist erforderlich, um einen Anker-Tag als deaktiviert erscheinen zu lassen.

Mein Link

Natürlich wird dies nicht verhindern, dass Links beim Klicken funktionieren. Der obige Link führt uns zu http://example.com. Um dies zu verhindern, können wir ein einfaches Stück jQuery-Code hinzufügen, um Anker-Tags mit der disabled Klasse anzusprechen und event.preventDefault() aufzurufen:

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

Wir können die disabled Klasse mit toggleClass() umschalten:

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

// Deaktiviert mit:
$('a').disable(true);

// Aktiviert mit:
$('a').disable(false);

JSFiddle deaktivierte Link-Demo.

---

Kombiniert

Dann können wir die zuvor erstellte Deaktivierungsfunktion erweitern, um den Typ des Elements zu überprüfen, das wir zu deaktivieren versuchen, indem wir is() verwenden. Auf diese Weise können wir toggleClass() verwenden, wenn es sich nicht um ein input oder button Element handelt, oder die disabled Eigenschaft umschalten, wenn es sich darum handelt:

// Erweiterte Deaktivierungsfunktion
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);
        });
    }
});

// Deaktiviert alle:
$('input, button, a').disable(true);

// Aktiviert alle:
$('input, button, a').disable(false);

Vollständige kombinierte JSFiddle-Demo.

Es ist außerdem erwähnenswert, dass die obige Funktion auch für alle Eingabetypen funktionieren wird.

Answer 2

Ich kann keine einfachere/einfachere Methode finden! ;-)

---

Verwendung von Anker-Tags (Links):

Löschen

---

Um das Anker-Tag zu aktivieren:

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

---

Um das Anker-Tag zu deaktivieren:

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

Answer 3

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

Deaktivierung:

Um eine Schaltfläche zu deaktivieren, zum Beispiel die Absenden-Schaltfläche, müssen Sie einfach das Attribut disabled hinzufügen, wie folgt:

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

Nach Ausführung der obigen Zeile sieht Ihr Absenden-Button-HTML-Tag so aus:

Beachten Sie das hinzugefügte 'disabled'-Attribut.

Aktivierung:

Um eine Schaltfläche zu aktivieren, zum Beispiel wenn Sie einen Text im Textfeld haben, müssen Sie das disable-Attribut entfernen, um die Schaltfläche zu aktivieren, wie folgt:

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

Jetzt wird der obige Code das 'disabled'-Attribut entfernen.

Answer 4

Ich weiß, dass ich spät dran bin, aber um die beiden Fragen spezifisch zu beantworten:

"Ich möchte einfach bestimmte klickbare Elemente deaktivieren, damit:

• Sie aufhören zu klicken
• Deaktiviert aussehen

Wie schwer kann das sein?"

Sie aufhören zu klicken

1.  Für Schaltflächen wie oder fügst du das Attribute hinzu: disabled.

Registrieren

2.  Für Links, JEDEN Link... eigentlich jedes HTML-Element, kannst du CSS3 pointer events verwenden.

.selector { pointer-events:none; }

Die Browserunterstützung für Pointer Events ist heutzutage großartig (12.05.14). Aber normalerweise müssen wir auch veraltetere Browser im IE-Bereich unterstützen, daher unterstützen IE10 und früher KEINE Pointer Events: http://caniuse.com/pointer-events. Daher ist es möglicherweise sinnvoll, eine der hier von anderen erwähnten JavaScript-Lösungen für veraltete Browser zu verwenden.

Weitere Informationen zu Pointer Events:

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

Sie sehen deaktiviert aus

Offensichtlich ist dies eine CSS-Antwort, also:

1.  Für Schaltflächen wie oder verwende den [attribute] Selektor:

button[disabled] { ... }

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

--

Hier ist ein grundlegendes Beispiel mit den hier erwähnten Sachen: http://jsfiddle.net/bXm5B/4/

Hoffe, das hilft.

Answer 5

Wenn Sie, wie ich, nur einen Button deaktivieren möchten, verpassen Sie nicht die einfache Antwort, die subtil in diesem langen Thread versteckt ist:

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