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

@James Donnelly hat eine umfassende Antwort geliefert, die darauf beruht, jQuery mit einer neuen Funktion zu erweitern. Das ist eine großartige Idee, daher werde ich seinen Code anpassen, damit 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)

Verwendung

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

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

Buttons und Inputs unterstützen die disabled-Eigenschaft und werden, wenn sie auf true gesetzt sind, deaktiviert aussehen (dank Bootstrap) und beim Klicken nicht ausgelöst.

Anker unterstützen die deaktivierte Eigenschaft nicht, sodass wir uns stattdessen auf die .disabled-Klasse verlassen, um sie deaktiviert aussehen zu lassen (wieder dank Bootstrap) und einen Standard-Klick-Event anzuhängen, der durch das Rückgeben von false das Klicken verhindert (keine Notwendigkeit für preventDefault siehe hier).

Hinweis: Sie müssen dieses Event nicht entfernen, wenn Sie Anker wieder aktivieren. Es reicht aus, die .disabled-Klasse zu entfernen.

Natürlich hilft dies nicht, wenn Sie einen benutzerdefinierten Klick-Handler an den Link angehängt haben, was sehr häufig ist, wenn Sie Bootstrap und jQuery verwenden. Daher werden wir die Erweiterung isDisabled() verwenden, um die .disabled-Klasse zu überprüfen, so wie hier:

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # mache etwas Nützliches

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

Answer 2

Beachten Sie, dass es ein seltsames Problem gibt, wenn Sie die JS-Buttons von Bootstrap und den 'Lade'-Status verwenden. Ich weiß nicht, warum das passiert, aber hier ist, wie man es behebt.

Angenommen, Sie haben einen Button und setzen ihn in den Ladezustand:

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

Jetzt möchten Sie ihn aus dem Ladezustand entfernen, aber auch deaktivieren (zum Beispiel war der Button ein Speichern-Button, der Ladezustand deutete auf eine laufende Validierung hin und die Validierung ist fehlgeschlagen). Das sieht vernünftig aus mit Bootstrap JS:

myButton.button('reset').prop('disabled', true); // FUNKTIONIERT NICHT

Leider wird dadurch der Button zurückgesetzt, aber nicht deaktiviert. Offensichtlich führt button() eine verzögerte Aufgabe aus. Sie müssen also auch die Deaktivierung verschieben:

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

Etwas ärgerlich, aber das ist ein Muster, das ich oft benutze.

Answer 3

Tolle Antwort und Beiträge von allen! Ich musste diese Funktion etwas erweitern, um die Deaktivierung von Auswahlelementen 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 funktionieren. Vielen Dank an alle!

Answer 4

Für diese Art von Verhalten verwende ich immer das jQueryUI button Widget, ich verwende es für Links und Buttons.

Definieren Sie das Tag innerhalb von HTML:

Beispiel Button
Link Button

Verwenden Sie jQuery, um die Buttons zu initialisieren:

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

Verwenden Sie die button Widget Methoden, um sie zu deaktivieren/aktivieren:

$("#sampleButton").button("enable"); // aktivieren Sie den Button
$("#linkButton").button("disable"); // deaktivieren Sie den Button

Damit wird das Verhalten des Buttons und des Cursors bearbeitet, aber wenn Sie tiefer gehen und den Button-Stil ändern müssen, wenn er deaktiviert ist, überschreiben Sie die folgenden CSS-Klassen in Ihrer Seiten-CSS-Datei.

.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 (wenn geändert) ändern auch den Stil für andere Widgets.

Answer 5

Das folgende hat für mich sehr gut funktioniert:

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