Tombol
Tombol- disabledtombolnya mudah dinonaktifkan karena merupakan properti tombol yang ditangani oleh 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>
Untuk menonaktifkannya dengan fungsi jQuery khusus, Anda cukup menggunakan 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);
Tombol JSFiddle dinonaktifkan dan input demo .
Kalau tidak, Anda akan menggunakan prop()metode jQuery :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Tag Jangkar
Perlu dicatat bahwa disabledini bukan properti yang valid untuk tag anchor. Karena alasan ini, Bootstrap menggunakan gaya berikut pada .btnelemen - elemennya:
.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;
}
Perhatikan bagaimana [disabled]properti ditargetkan serta .disabledkelas. The .disabledkelas adalah apa yang dibutuhkan untuk membuat tag anchor muncul dinonaktifkan.
<a href="http://example.com" class="btn">My Link</a>
Tentu saja, ini tidak akan mencegah tautan berfungsi saat diklik. Tautan di atas akan membawa kita ke http://example.com . Untuk mencegah hal ini, kita dapat menambahkan sepotong kode jQuery sederhana ke tag anchor target dengan disabledkelas untuk memanggil event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Kita dapat beralih disabledkelas dengan menggunakan 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);
Demo tautan JSFiddle dinonaktifkan .
Gabungan
Kami kemudian dapat memperluas fungsi menonaktifkan sebelumnya yang dibuat di atas untuk memeriksa jenis elemen yang kami coba nonaktifkan gunakan is(). Dengan cara ini kita dapat toggleClass()jika itu bukan elemen inputatau buttonelemen, atau beralih disabledproperti jika:
// 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 gabungan lengkap .
Perlu dicatat lebih lanjut bahwa fungsi di atas juga akan berfungsi pada semua tipe input.
