Wie kann ich Schaltflächen und Links mithilfe von jQuery und Bootstrap einfach deaktivieren und aktivieren?

So deaktivieren/aktivieren Sie mühelos Schaltflächen und Links mit jQuery Bootstrap

Verstehen des Problems

Manchmal kann es vorkommen, dass Sie auf Folgendes stoßen Situationen, in denen Sie verhindern möchten, dass Benutzer mit bestimmten Schaltflächen oder Links interagieren. Dazu gehört sowohl die visuelle Anzeige ihres deaktivierten Zustands als auch die Verhinderung jeglicher Klickereignisse.

Lösung für Schaltflächen

Deaktivieren Sie Schaltflächen nahtlos, indem Sie ihre deaktivierten Eigenschaften bearbeiten:

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

Für eine benutzerdefinierte jQuery-Deaktivierungsfunktion:

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

Deaktivieren: $('input[type="submit"], input[type="button"], button').disable(true);
Aktivieren: $('input[type="submit"], input[type ="button"], button').disable(false);

Lösung für Anker-Tags (Links)

Anchor-Tags haben keine eine deaktivierte Eigenschaft, aber Bootstrap handhabt dies mit CSS-Stil. Darüber hinaus können wir jQuery integrieren, um zu verhindern, dass Links funktionieren, wenn sie deaktiviert sind:

.btn.disabled, .btn[disabled] {
    cursor: default;
    opacity: 0.65;
    color: #333;
    background-color: #E6E6E6;
}

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

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

Disable: $('a').disable(true);
Enable: $( 'a').disable(false);

Kombinierte Lösung

Kombinieren Mit den oben genannten Ansätzen können wir die Deaktivierungsfunktion erweitern, um den Elementtyp zu überprüfen und die Deaktivierung entsprechend zu handhaben:

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

Disable all: $('input, button, a').disable(true);
Alles aktivieren: $('input, button, a').disable(false);

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