Düğmeler
disabledTarayıcı tarafından işlenen bir düğme özelliği olduğu gibi düğmelerin devre dışı bırakılması kolaydır :
<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>
Bunları özel bir jQuery işleviyle devre dışı bırakmak için aşağıdakilerden faydalanırsınız 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 devre dışı düğmesi ve giriş demosu .
Aksi takdirde jQuery'nin prop()yöntemini kullanırsınız:
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Bağlantı Etiketleri
Sabitleme etiketleri için geçerli bir özellikdisabled olmadığını belirtmek gerekir . Bu nedenle, Bootstrap öğelerinde aşağıdaki stili kullanır :.btn
.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;
}
[disabled]Özelliğin ve bir .disabledsınıfın nasıl hedeflendiğine dikkat edin . .disabledSınıf bir bağlantı etiketi devre dışı görünür hale getirmek için gerekli olan budur.
<a href="http://example.com" class="btn">My Link</a>
Tabii ki, bu tıklandığında bağlantıların çalışmasını engellemez. Yukarıdaki bağlantı bizi http://example.com adresine götürecektir . Bunu önlemek disablediçin, çağıracağınız sınıfla bağlantı etiketlerini hedeflemek için basit bir jQuery kodu parçası ekleyebiliriz event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
disabledSınıfı kullanarak şunları değiştirebiliriz 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 bağlantı demosunu devre dışı bıraktı .
kombine
Ardından, devre dışı bırakmaya çalıştığımız öğenin türünü kontrol etmek için yukarıda yapılan önceki devre dışı bırakma işlevini genişletebiliriz is(). Bu şekilde toggleClass(), bir inputveya buttonöğe değilse veya disabledözelliği şu şekilde değiştiririz:
// 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);
Tam birleşik JSFiddle demosu .
Yukarıdaki işlevin tüm giriş türlerinde de çalışacağını belirtmek gerekir.
