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

Schaltflächen

Schaltflächen sind einfach zu deaktivieren, da disabled eine Schaltflächeneigenschaft ist, die vom Browser gehandhabt wird:

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

Um diese mit einer benutzerdefinierten jQuery-Funktion zu deaktivieren, verwenden Sie einfach 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][2].

Andernfalls würden Sie jQuery's prop() Methode verwenden:

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

Anker-Tags

Es ist erwähnenswert, dass disabled keine 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, dass die Eigenschaft [disabled]' und die Klasse.disabled' verwendet werden. Die Klasse "disabled" wird benötigt, um einen Anker-Tag deaktiviert erscheinen zu lassen.

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

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

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

Wir können die Klasse disabled umschalten, indem wir toggleClass() verwenden:

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 deaktiviert Link Demo][8].

Kombiniert

Wir können dann die oben beschriebene Funktion zum Deaktivieren erweitern, um den Typ des Elements zu prüfen, das wir mit is() deaktivieren wollen. Auf diese Weise können wir toggleClass() verwenden, wenn es sich nicht um ein input- oder button-Element handelt, oder die Eigenschaft disabled umschalten, wenn dies der Fall ist:

// 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][10].

Es ist erwähnenswert, dass die obige Funktion auch mit allen Eingabetypen funktioniert.

Ich kann mir nichts Einfacheres vorstellen ;-)

Verwendung von Anchor-Tags (Links) :

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

Um das Anchor-Tag zu aktivieren:

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

So deaktivieren Sie den Anchor-Tag:

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

@James Donnelly hat eine umfassende Antwort geliefert, die sich auf die Erweiterung von jQuery mit einer neuen Funktion stützt. Das ist eine großartige Idee, also werde ich seinen Code anpassen, damit er so funktioniert, wie ich es brauche.

Erweiterung von 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)

Verwendung

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

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

Schaltflächen und Eingaben unterstützen die Eigenschaft disabled. Wenn sie auf true gesetzt sind, sehen sie deaktiviert aus (dank Bootstrap) und werden beim Anklicken nicht ausgelöst.

Anker unterstützen die Eigenschaft disabled nicht, so dass wir uns stattdessen auf die Klasse .disabled verlassen, um sie deaktiviert aussehen zu lassen (wieder dank Bootstrap) und ein Standard-Klick-Ereignis einzurichten, das den Klick verhindert, indem es false zurückgibt (keine Notwendigkeit für preventDefault siehe hier).

Anmerkung: Sie müssen dieses Ereignis nicht aushängen, wenn Sie die Anker wieder aktivieren. Das einfache Entfernen der Klasse .disabled genügt.

Natürlich hilft dies nicht, wenn Sie einen benutzerdefinierten Click-Handler an den Link angehängt haben, etwas, das bei der Verwendung von Bootstrap und jQuery sehr häufig ist. Um damit umzugehen, verwenden wir die Erweiterung "isDisabled()", um auf die Klasse "disabled" zu testen, etwa so:

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

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