nút
Các nút đơn giản để vô hiệu hóa disabledlà thuộc tính nút được trình duyệt xử lý:
<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>
Để vô hiệu hóa các chức năng này bằng một hàm jQuery tùy chỉnh, bạn chỉ cần sử dụng 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);
Nút vô hiệu hóa JSFiddle và bản demo đầu vào .
Nếu không, bạn sẽ sử dụng prop()phương thức của jQuery :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Thẻ neo
Đáng lưu ý rằng đó disabledkhông phải là một thuộc tính hợp lệ cho các thẻ neo. Vì lý do này, Bootstrap sử dụng kiểu dáng sau trên các .btnthành phần của nó :
.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;
}
Lưu ý cách [disabled]tài sản được nhắm mục tiêu cũng như một .disabledlớp. Các .disabledlớp học là những gì cần thiết để làm cho một thẻ neo xuất hiện tàn tật.
<a href="http://example.com" class="btn">My Link</a>
Tất nhiên, điều này sẽ không ngăn các liên kết hoạt động khi nhấp vào. Liên kết trên sẽ đưa chúng ta đến http://example.com . Để ngăn chặn điều này, chúng ta có thể thêm vào một đoạn mã jQuery đơn giản để nhắm mục tiêu các thẻ neo với disabledlớp cần gọi event.preventDefault():
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Chúng ta có thể chuyển đổi disabledlớp bằng cách sử dụng 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);
Bản demo liên kết bị vô hiệu hóa của JSFiddle .
Kết hợp
Sau đó, chúng tôi có thể mở rộng chức năng tắt trước đó được thực hiện ở trên để kiểm tra loại phần tử mà chúng tôi đang cố gắng vô hiệu hóa bằng cách sử dụng is(). Bằng cách này, chúng tôi có thể toggleClass()nếu đó không phải là một phần tử inputhoặc buttonphần tử hoặc chuyển đổi thuộc disabledtính nếu đó là:
// 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);
Bản demo kết hợp đầy đủ của JSFiddle .
Cần lưu ý thêm rằng chức năng trên cũng sẽ hoạt động trên tất cả các loại đầu vào.
