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

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ć?

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ść.

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

Aby wyłączyć tag Anchor:

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

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”.

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://wiki.csswg.org/spec/css4-ui#pointer-events

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.

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

@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.

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.

Ś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!

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.

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

$("#button").attr('disabled', 'disabled');

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)!

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){

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;
  }
}

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");
    }
}

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>

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

style="cursor: not-allowed;"