Tasten
Schaltflächen sind einfach zu deaktivieren, ebenso disabledwie eine Schaltflächeneigenschaft, die vom Browser verarbeitet wird:
<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>
Um diese mit einer benutzerdefinierten jQuery-Funktion zu deaktivieren, verwenden Sie einfach Folgendes 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 .
Andernfalls würden Sie die prop()Methode von jQuery verwenden:
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Anker-Tags
Es ist erwähnenswert, dass dies disabledkeine gültige Eigenschaft für Ankertags ist. Aus diesem Grund verwendet Bootstrap das folgende Styling für seine .btnElemente:
.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 die [disabled]Eigenschaft sowie eine .disabledKlasse als Ziel ausgewählt werden. Die .disabledKlasse ist erforderlich, damit ein Ankertag deaktiviert erscheint.
<a href="http://example.com" class="btn">My Link</a>
Dies verhindert natürlich nicht, dass Links funktionieren, wenn Sie darauf klicken. Der obige Link führt uns zu http://example.com . Um dies zu verhindern, können wir einen einfachen Teil des jQuery-Codes hinzufügen, um Ankertags mit der disabledaufzurufenden Klasse anzuvisieren event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Wir können die disabledKlasse umschalten , indem wir Folgendes verwenden toggleClass():
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 deaktivierte Link-Demo .
Kombiniert
Wir können dann die oben beschriebene vorherige Deaktivierungsfunktion erweitern, um den Elementtyp zu überprüfen, mit dem wir die Deaktivierung versuchen is(). Auf diese Weise können wir, toggleClass()wenn es sich nicht um ein inputoder button-Element handelt, die disabledEigenschaft umschalten, wenn es sich um Folgendes handelt:
// 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 .
Es ist weiter zu beachten, dass die obige Funktion auch für alle Eingabetypen funktioniert.
