Czasami używam anchorów stylizowanych na przyciski, a czasami po prostu używam przycisków. Chcę wyłączyć określone klikalne rzeczy, aby:
Jak mogę to zrobić?
Przyciski są proste do wyłączenia, ponieważ disabled
jest właściwością przycisku, która jest obsługiwana przez przeglądarkę:
<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>
Aby je wyłączyć za pomocą niestandardowej funkcji jQuery, po prostu skorzystaj 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 disabled button and input demo][2].
W przeciwnym razie użyłbyś metody jQuery's prop()
:
$('button').prop('disabled', true);
$('button').prop('disabled', false);
Warto zauważyć, że disabled
nie jest poprawną właściwością dla znaczników zakotwiczenia. Z tego powodu Bootstrap używa następującej stylizacji dla swoich elementów .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;
}
Zwróć uwagę jak właściwość [disabled]
jest ukierunkowana, jak również klasa .disabled
. Klasa .disabled
jest tym, co jest potrzebne, aby znacznik kotwicy wyglądał na wyłączony.
<a href="http://example.com" class="btn">My Link</a>
Oczywiście nie przeszkodzi to w funkcjonowaniu linków po kliknięciu. Powyższy link przeniesie nas na stronę http://example.com. Aby temu zapobiec, możemy dodać prosty kawałek kodu jQuery, aby skierować znaczniki zakotwiczenia z klasą disabled
do wywołania event.preventDefault()
:
$('body').on('click', 'a.disabled', function(event) {
event.preventDefault();
});
Możemy przełączać klasę disabled
za pomocą 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 disabled link demo][8].
Możemy następnie rozszerzyć poprzednią funkcję disable wykonaną powyżej, aby sprawdzić typ elementu, który chcemy wyłączyć, używając is()
. W ten sposób możemy toggleClass()
jeśli nie jest to element input
lub button
, lub przełączać właściwość disabled
jeśli jest:
// 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);
[Pełne połączone demo JSFiddle][10].
Warto zauważyć, że powyższa funkcja będzie również działać na wszystkich typach danych wejściowych.
Nie mogę sobie wyobrazić prostszego/łatwiejszego sposobu! ;-)
Używanie znaczników Anchor (Linki) :
<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>
Aby włączyć znacznik Anchor:
$('#delete').removeClass('disabled');
$('#delete').attr("data-toggle", "modal");
Aby wyłączyć znacznik Anchor:
$('#delete').addClass('disabled');
$('#delete').removeAttr('data-toggle');
@James Donnelly dostarczył wyczerpującą odpowiedź, która opiera się na rozszerzeniu jQuery o nową funkcję. To świetny pomysł, więc zamierzam dostosować jego kod, aby działał tak, jak tego potrzebuję.
Rozszerzanie jQuery
$.fn.disable=-> setState $(@), true
$.fn.enable =-> setState $(@), false
$.fn.isDisabled =-> $(@).hasClass 'disabled'
setState=($el, state) ->
$el.each ->
$(@).prop('disabled', state) if $(@).is 'button, input'
if state then $(@).addClass('disabled') else $(@).removeClass('disabled')
$('body').on('click', 'a.disabled', -> false)
Użycie
$('.btn-stateful').disable()
$('#my-anchor').enable()
Kod będzie przetwarzał pojedynczy element lub listę elementów.
Przyciski i wejścia obsługują właściwość disabled
i jeśli ustawione na true
, będą wyglądały na wyłączone (dzięki bootstrapowi) i nie będą się uruchamiały po kliknięciu.
Kotwice nie obsługują właściwości disabled, więc zamiast tego będziemy polegać na klasie .disabled
aby wyglądały na wyłączone (dzięki bootstrapowi ponownie) i podepniemy domyślne zdarzenie kliknięcia, które zapobiegnie kliknięciu zwracając false (nie ma potrzeby używania preventDefault
zobacz tutaj).
Uwaga: Nie musisz odhaczać tego zdarzenia podczas ponownego włączania kotwic. Po prostu usunięcie klasy .disabled
załatwia sprawę.
Oczywiście, nie pomoże to, jeśli do linku został dołączony niestandardowy handler kliknięcia, co jest bardzo częste w przypadku używania bootstrapa i jQuery. Więc aby sobie z tym poradzić, będziemy używać rozszerzenia isDisabled()
do testowania klasy .disabled
, jak poniżej:
$('#my-anchor').click ->
return false if $(@).isDisabled()
# do something useful
Mam nadzieję, że to pomoże nam nieco uprościć sprawę.