pulsanti
I pulsanti sono semplici da disabilitare come lo disabledè una proprietà button gestita dal browser:
<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>
Per disabilitarli con una funzione jQuery personalizzata, faresti semplicemente uso di 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);
J Pulsante Disinstalla disabilitato e input demo .
Altrimenti faresti uso del prop()metodo di jQuery :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Tag di ancoraggio
Vale la pena notare che disablednon è una proprietà valida per i tag di ancoraggio. Per questo motivo, Bootstrap utilizza il seguente stile sui suoi .btnelementi:
.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;
}
Nota come la [disabled]proprietà è targetizzata e una .disabledclasse. La .disabledclasse è ciò che è necessario per far apparire disabilitato un tag di ancoraggio.
<a href="http://example.com" class="btn">My Link</a>
Naturalmente, ciò non impedirà il funzionamento dei collegamenti quando si fa clic. Il link sopra ci porterà a http://example.com . Per evitare ciò, possiamo aggiungere un semplice pezzo di codice jQuery per indirizzare i tag anchor con la disabledclasse da chiamare event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Possiamo attivare o disattivare la disabledclasse utilizzando 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 demo di collegamento disabilitato .
Combinato
Possiamo quindi estendere la precedente funzione di disabilitazione fatta sopra per verificare il tipo di elemento che stiamo tentando di disabilitare utilizzando is(). In questo modo possiamo toggleClass()se non è un inputo buttonelemento, o attivare la disabledproprietà se è:
// 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);
Demo JSFiddle combinata completa .
Vale la pena notare inoltre che la funzione sopra funzionerà anche su tutti i tipi di input.
