Кнопки
Кнопки легко відключити, оскільки 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 демо .
Варто далі зазначити, що вищевказана функція також буде працювати на всіх типах введення.
