Jaki jest najłatwiejszy sposób na wyłączenie / włączenie przycisków i linków (jQuery + Bootstrap)

360

Czasami używam kotwic w stylu przycisków, a czasami po prostu używam przycisków. Chcę wyłączyć określone klikalne elementy, aby:

  • Wyglądają na wyłączone
  • Przestają być klikane

W jaki sposób mogę to zrobić?

biofraktal
źródło
patrz mój post na dole, ale tutaj jest mniej opisowy $ („yourSelector”). przycisk („enable”); // włącz przycisk lub $ („yourSelector”). button („disable”); // wyłącz przycisk, jeśli używany jest widget przycisku z jqueryUI.
El Bayames,
Dokumentacja BS3 mówi, aby używać role="button"linków, ale nie wydaje się, aby miało to wpływ na ten problem. getbootstrap.com/css/#buttons
Jess
2
Po a.btn[disabled]wyłączeniu, ale pozostaniu klikalnym, jest to błąd w IMO Bootstrap. Atrybut [disabled]powinien wyglądać na wyłączony tylko dla buttoni input.
Jess

Odpowiedzi:

575

guziki

Przyciski można łatwo wyłączyć, podobnie jak disabledwłaściwość przycisku 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, wystarczy skorzystać 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 wyłączony przycisk i wejście demo .

W przeciwnym razie skorzystasz z prop()metody jQuery :

$('button').prop('disabled', true);
$('button').prop('disabled', false);

Tagi kotwiczne

Warto zauważyć, że disablednie jest to poprawna właściwość tagów zakotwiczenia. Z tego powodu Bootstrap używa następującej stylizacji na swoich .btnelementach:

.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ę, w jaki sposób [disabled]właściwość jest kierowana, a także .disabledklasa. .disabledKlasa to, co jest potrzebne, aby znacznik kotwica pojawiają wyłączone.

<a href="http://example.com" class="btn">My Link</a>

Oczywiście nie uniemożliwi to działania linków po kliknięciu. Powyższy link przeniesie nas na http://example.com . Aby temu zapobiec, możemy dodać prosty fragment kodu jQuery, aby kierować tagi zakotwiczenia za pomocą disabledklasy do wywołania event.preventDefault():

$('body').on('click', 'a.disabled', function(event) {
    event.preventDefault();
});

Możemy przełączać disabledklasę 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);

Demo JDLiddle wyłączone łącze .


Łączny

Następnie możemy rozszerzyć poprzednią funkcję wyłączania wykonaną powyżej, aby sprawdzić typ elementu, którego próbujemy wyłączyć is(). W ten sposób możemy toggleClass(), jeśli nie jest to inputczy buttonelement lub przełączyć disablednieruchomości jeśli jest to:

// 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);

W pełni połączone demo JSFiddle .

Warto ponadto zauważyć, że powyższa funkcja będzie działać również na wszystkich typach wejść.

James Donnelly
źródło
Dzięki za wyczerpującą odpowiedź. Proszę zobaczyć moją Edycję 1 dla wersji skryptu kawy. Nadal mam problemy z uzyskaniem linków, aby zapobiec kliknięciu. Czy chodziło mi o zachowanie return false if $(@).prop('disabled')niestandardowych modułów obsługi kliknięć? Bez tego wiersza programy obsługi są uruchamiane niezależnie.
biofractal
1
@biofractal, jak wspomniałem, disablednie jest prawidłową właściwością tagu kotwicy, więc nie należy jej używać. Zdarzenie click Dałem bazuje na .disabledklasie, ale to, co można wykorzystać to hasClass('disabled')- jeśli to prawda, preventDefault.
James Donnelly
ah, ok. Dzięki. Dlaczego więc nie powinienem utworzyć i użyć disabledwłaściwości na kotwicy. Jest to obiekt dynamiczny, więc mogę go po prostu ustawić i używać, tak jak rozbudowałem zestaw funkcji kotwicy? Zaktualizowałem moją odpowiedź poniżej, aby to pokazać. Co myślisz? Czy to jest złe? Czy musisz .off()także preventDefaultkliknąć zdarzenie po ponownym włączeniu łącza?
biofraktal
Jest to niezgodne ze specyfikacją i nie przejdzie testów walidacyjnych. Jeśli chcesz mieć disabledwłaściwość niestandardową , możesz skorzystać z data-*atrybutów . Ponieważ Bootstrap już stosuje te same disabledstyle właściwości, class="disabled"możesz również polegać na klasie.
James Donnelly
Rozumiem - dostosowałem swoją odpowiedź, aby odzwierciedlić twoje komentarze. Nadal obawiam się, że jeśli podłączę się preventDefaultdo wszystkich zdarzeń kliknięcia kotwicy, będę musiał je odłączyć po ponownym włączeniu linku. A może coś źle zrozumiałem?
biofractal
48

Nie mogę wymyślić prostszego / łatwiejszego sposobu! ;-)


Używanie tagów zakotwiczenia (łącza):

<a href="#delete-modal" class="btn btn-danger" id="delete">Delete</a>

Aby włączyć tag zakotwiczenia:

 $('#delete').removeClass('disabled');
 $('#delete').attr("data-toggle", "modal");

wprowadź opis zdjęcia tutaj


Aby wyłączyć tag Anchor:

 $('#delete').addClass('disabled');
 $('#delete').removeAttr('data-toggle');

wprowadź opis zdjęcia tutaj

oikonomopo
źródło
27

Załóżmy, że masz pole tekstowe i przycisk Prześlij,

<input type="text" id="text-field" />
<input type="submit" class="btn" value="Submit"/>

Wyłączanie:

Aby wyłączyć dowolny przycisk, na przykład przycisk Prześlij, wystarczy dodać atrybut disabled jako,

$('input[type="submit"]').attr('disabled','disabled');

Po wykonaniu powyższej linii znacznik HTML przycisku wysyłania wygląda następująco:

<input type="submit" class="btn" value="Submit" disabled/>

Zauważ, że dodano atrybut „wyłączony” .

Włączanie:

Do włączania przycisku, na przykład gdy masz tekst w polu tekstowym. Musisz usunąć atrybut wyłączania, aby włączyć przycisk jako,

 if ($('#text-field').val() != '') {
     $('input[type="submit"]').removeAttr('disabled');
 }

Teraz powyższy kod usunie atrybut „disabled”.

Sohail xIN3N
źródło
22

Wiem, że jestem spóźniony na przyjęcie, ale konkretnie odpowiadam na dwa pytania:

„Chcę tylko wyłączyć określone klikalne elementy, aby:

  • Przestają klikać
  • Wyglądają na wyłączone

Jak trudne to może być? ”

Przestają klikać

1. Do przycisków podoba <button>lub <input type="button">dodać atrybut: disabled.

<button type="submit" disabled>Register</button>
<input type="button" value="Register" disabled>

2. W przypadku linków, DOWOLNY link ... właściwie, dowolnego elementu HTML, można użyć zdarzeń wskaźnika CSS3 .

.selector { pointer-events:none; }

Obsługa przeglądarek dla zdarzeń wskaźnikowych jest niesamowita, jak na dzisiejszy stan techniki (5/12/14). Ale zwykle musimy obsługiwać starsze przeglądarki w dziedzinie IE, więc IE10 i poniżej NIE obsługują zdarzeń wskaźnika: http://caniuse.com/pointer-events . Tak więc korzystanie z jednego z rozwiązań JavaScript wspomnianych przez innych tutaj może być sposobem na przejście do starszych przeglądarek.

Więcej informacji o zdarzeniach wskaźnika:

Wyglądają na wyłączone

Oczywiście jest to odpowiedź CSS, więc:

1. W przypadku przycisków takich jak <button>lub <input type="button">użyj [attribute]wybieraka:

button[disabled] { ... }

input[type=button][disabled] { ... }

-

Oto podstawowe demo z materiałami, o których tu wspomniałem: http://jsfiddle.net/bXm5B/4/

Mam nadzieję że to pomoże.

Ricardo Zea
źródło
17

Jeśli, podobnie jak ja, chcesz po prostu wyłączyć przycisk, nie przegap prostej odpowiedzi subtelnie ukrytej w tym długim wątku:

 $("#button").prop('disabled', true);
Graham Laight
źródło
prawdziwy bohater, to wszystko, czego potrzebowałem.
ricks
7

@James Donnelly udzielił wyczerpującej odpowiedzi, która polega na rozszerzeniu jQuery o nową funkcję. To świetny pomysł, więc zamierzam dostosować jego kod, aby działał tak, jak powinienem.

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)

Stosowanie

$('.btn-stateful').disable()
$('#my-anchor').enable()

Kod przetworzy pojedynczy element lub listę elementów.

Przyciski i dane wejściowe obsługują disabledwłaściwość, a jeśli ustawione na true, będą wyglądać na wyłączone (dzięki bootstrap) i nie będą uruchamiane po kliknięciu.

Kotwice nie obsługują właściwości disabled, więc zamiast tego będziemy polegać na .disabledklasie, która sprawi, że będą wyglądać na wyłączone (dzięki bootstrapowi ponownie) i podłączą domyślne zdarzenie click, które zapobiega kliknięciu, zwracając wartość false (nie trzeba tutajpreventDefault widzieć ) .

Uwaga : Nie trzeba odczepiać tego zdarzenia podczas ponownego włączania kotwic. Wystarczy usunąć .disabledklasę.

Oczywiście nie pomaga to, jeśli do linku dołączono niestandardową procedurę obsługi kliknięć, co jest bardzo częste podczas korzystania z bootstrap i jQuery. Aby sobie z tym poradzić, użyjemy isDisabled()rozszerzenia, aby przetestować .disabledklasę:

$('#my-anchor').click -> 
    return false if $(@).isDisabled()
    # do something useful

Mam nadzieję, że trochę to uprości.

biofraktal
źródło
7

Zauważ, że istnieje dziwny problem, jeśli używasz przycisków JS Bootstrap i stanu „ładowania”. Nie wiem, dlaczego tak się dzieje, ale oto jak to naprawić.

Załóżmy, że masz przycisk i ustawiłeś go na stan ładowania:

var myButton = $('#myBootstrapButton');
myButton.button('loading');

Teraz chcesz usunąć go ze stanu ładowania, ale także go wyłączyć (np. Przycisk był przyciskiem Zapisz, stan ładowania wskazywał na ciągłą weryfikację, a weryfikacja nie powiodła się). Wygląda to na rozsądny Bootstrap JS:

myButton.button('reset').prop('disabled', true); // DOES NOT WORK

Niestety zresetuje to przycisk, ale go nie wyłączy. Najwyraźniej button()wykonuje jakieś opóźnione zadanie. Będziesz musiał także odłożyć wyłączenie:

myButton.button('reset');
setTimeout(function() { myButton.prop('disabled', true); }, 0);

Trochę denerwujące, ale często używam tego wzoru.

Henrik Heimbuerger
źródło
6

Świetna odpowiedź i wkład wszystkich! Musiałem nieco rozszerzyć tę funkcję, aby uwzględnić wyłączenie wybranych elementów:

jQuery.fn.extend({
disable: function (state) {
    return this.each(function () {
        var $this = jQuery(this);
        if ($this.is('input, button'))
            this.disabled = state;
        else if ($this.is('select') && state)
            $this.attr('disabled', 'disabled');
        else if ($this.is('select') && !state)
            $this.removeAttr('disabled');
        else
            $this.toggleClass('disabled', state);
    });
}});

Wygląda na to, że dla mnie pracuje. Dziękuje wszystkim!

Brandon Johnson
źródło
5

Do tego rodzaju zachowania zawsze używam buttonwidżetu jQueryUI , używam go do linków i przycisków.

Zdefiniuj tag w HTML:

<button id="sampleButton">Sample Button</button>
<a id="linkButton" href="yourHttpReferenceHere">Link Button</a>

Użyj jQuery, aby zainicjować przyciski:

$("#sampleButton").button();
$("#linkButton").button();

Użyj buttonmetod widgetów, aby je wyłączyć / włączyć:

$("#sampleButton").button("enable"); //enable the button
$("#linkButton").button("disable"); //disable the button

To zajmie się zachowaniem przycisku i kursora, ale jeśli musisz wejść głębiej i zmienić styl przycisku, gdy jest wyłączony, zastąp następujące klasy CSS w pliku CSS strony.

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
      background-color:aqua;
      color:black;
 }

Pamiętaj jednak: te klasy CSS (jeśli zostaną zmienione) zmienią styl również dla innych widżetów.

El Bayames
źródło
1
Całkiem pewien, że to jest odpowiedź na guziki jQuery UI i nie dla przycisków Bootstrap używanych z plain vanilla jQuery, przy czym ten ostatni co OP jest używana. Btw, umieszczenie odpowiedzi w komentarzu do pytania nie jest preferowaną metodą rozpowszechniania. ; ^)
ruffin
3

Poniższe działało dla mnie bardzo dobrze:

$("#button").attr('disabled', 'disabled');
Raptor
źródło
2

To dość późna odpowiedź, ale natknąłem się na to pytanie, szukając sposobu na wyłączenie przycisków boostrap po kliknięciu i może dodać ładny efekt (np. Pokrętło). Znalazłem świetną bibliotekę, która dokładnie to robi:

http://msurguy.github.io/ladda-bootstrap/

Wystarczy dołączyć wymagane css i js, dodać niektóre właściwości do przycisków i włączyć lada z javascript ... Presto! Twoje przyciski mają nowe życie (sprawdź wersję demonstracyjną, aby zobaczyć, jak pięknie jest)!

Serafeim
źródło
2

Powyższe nie działa, ponieważ czasami

$(this).attr('checked') == undefined

dostosuj swój kod za pomocą

if(!$(this).attr('checked') || $(this).attr('checked') == false){
Kiko Seijo
źródło
2

Wiem, że moja odpowiedź jest spóźniona, ale IMO to najprostszy sposób na przełączenie przycisku „włącz” i przycisku „wyłącz”

function toggleButtonState(button){

  //If button is enabled, -> Disable
  if (button.disabled === false) {
    button.disabled = true;

  //If button is disabled, -> Enable
  } else if (button.disabled === true) {
    button.disabled = false;
  }
}
jward01
źródło
1

Załóżmy, że masz na stronie następujące przyciski:

<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit" class="byBtn" disabled="disabled" value="Change"/>
<input type="submit"value="Enable All" onclick="change()"/>

Kod js:

function change(){
   var toenable = document.querySelectorAll(".byBtn");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }
}
Samit
źródło
1

Załóżmy, że masz taki wygląd, który jest obecnie włączony.

<button id="btnSave" class="btn btn-info">Save</button>

Po prostu dodaj to:

$("#btnSave").prop('disabled', true);

i dostaniesz to, co wyłączy przycisk

<button id="btnSave" class="btn btn-primary" disabled>Save</button>
Apollo
źródło
2
Pytanie o przyciski i kotwice. Ta disabledwłaściwość nie jest prawidłową właściwością dla tagów zakotwiczenia.
biofractal
0

Jeśli chcesz wyłączyć klikalne, możesz również dodać to w wierszu w HTML

style="cursor: not-allowed;"
Ken Xu
źródło