Кнопки
Кнопки просто отключить, так как disabledэто свойство кнопки, которое обрабатывается браузером:
<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>
Чтобы отключить их с помощью пользовательской функции jQuery, вы просто должны использовать 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 отключена кнопка и ввод демо .
В противном случае вы бы использовали prop()метод jQuery :
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Якорные Теги
Стоит отметить, что disabledэто недействительное свойство для тегов привязки. По этой причине Bootstrap использует следующий стиль для своих .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]свойство нацелено, а также.disabled класс. .disabledКласс является то , что нужно , чтобы сделать якорь тег появится отключен.
<a href="http://example.com" class="btn">My Link</a>
Конечно, это не помешает функционированию ссылок при нажатии. Приведенная выше ссылка приведет нас к http://example.com . Чтобы предотвратить это, мы можем добавить простой кусок кода jQuery для целевых тегов привязки с disabledклассом для вызоваevent.preventDefault() :
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Мы можем переключить disabledкласс с помощью 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 отключена ссылка демо .
комбинированный
Затем мы можем расширить предыдущую функцию отключения, сделанную выше, чтобы проверить тип элемента, который мы пытаемся отключить с помощью is(). Таким образом , мы можем , toggleClass()если это не является inputили buttonэлемент, или переключить на disabledимущество , если оно:
// 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);
Полная комбинированная демонстрация JSFiddle .
Стоит также отметить, что вышеуказанная функция также будет работать на всех типах ввода.
