Wie kann ich Schaltflächen und Links mit jQuery und Bootstrap deaktivieren und aktivieren?

Schaltflächen und Links mithilfe von jQuery und Bootstrap deaktivieren und aktivieren

Manchmal müssen Sie verhindern, dass auf bestimmte Schaltflächen oder Links geklickt wird, und ihnen ein deaktiviertes Erscheinungsbild verleihen. So erreichen Sie dies mit jQuery und Bootstrap:

Schaltflächen

Schaltflächen in HTML verfügen über ein integriertes „disabled“-Attribut, das es einfach macht, sie zu deaktivieren:

<button class="btn" disabled>Disabled Button</button>

Um Schaltflächen mit einer benutzerdefinierten jQuery-Funktion zu deaktivieren, erweitern Sie deren Funktionalität mit der Methode „disable()“:

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

$('button').disable(true); // Disable buttons
$('button').disable(false); // Enable buttons

Anchor Tags

Deaktiviert ist kein gültiges Attribut für Anker-Tags (). Stattdessen formatiert Bootstrap Elemente mit der Klasse .btn.disabled, um sie deaktiviert erscheinen zu lassen.

<a href="#" class="btn disabled">Disabled Link</a>

Um zu verhindern, dass Links funktionieren, wenn sie deaktiviert sind, verwenden Sie jQuery, um Klicks abzufangen:

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

Kombinierter Ansatz

Sie können die Funktion „disable()“ erweitern, um Eingaben, Schaltflächen usw. zu verarbeiten Links:

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

Damit können Sie alle anklickbaren Elemente mit einer einzigen Codezeile deaktivieren:

$('input, button, a').disable(true); // Disable all clickable elements
$('input, button, a').disable(false); // Enable all clickable elements

Das obige ist der detaillierte Inhalt vonWie kann ich Schaltflächen und Links mit jQuery und Bootstrap deaktivieren und aktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!