Wat is de makkelijkste manier om uit te schakelen / inschakelen van knoppen en links (jQuery + Bootstrap)

Buttons

Knoppen zijn eenvoudig uit te schakelen omdat disabled een eigenschap van de knop is die door de browser wordt afgehandeld:

<input type="submit" class="btn" value="My Input Submit" disabled/>
<input type="button" class="btn" value="My Input Button" disabled/>
My Button

Om deze uit te schakelen met een aangepaste jQuery functie, zou je'doodeenvoudig gebruik maken van 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 uitgeschakeld knop en input demo][2].

Anders'zou je gebruik maken van jQuery's prop() methode:

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

Anchor Tags

Het is de moeite waard om op te merken dat disabled geen geldige eigenschap is voor anker tags. Om deze reden gebruikt Bootstrap de volgende styling op zijn .btn elementen:

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

Merk op hoe de [disabled] eigenschap is gericht, evenals een .disabled klasse. De .disabled class is wat nodig is om een anchor tag uitgeschakeld te laten lijken.

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

Natuurlijk zal dit niet verhinderen dat links werken wanneer erop geklikt wordt. De bovenstaande link brengt ons naar http://example.com. Om dit te voorkomen, kunnen we een eenvoudig stukje jQuery code toevoegen om anker tags met de disabled class aan te roepen event.preventDefault():

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

We kunnen de disabled class aanzetten door toggleClass() te gebruiken:

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 uitgeschakelde link demo][8].

Gecombineerd

We kunnen dan de vorige disable functie van hierboven uitbreiden om het type element te controleren dat we proberen uit te schakelen met is(). Op deze manier kunnen we toggleClass() als het geen input of button element is, of de disabled eigenschap aanzetten als het dat wel is:

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

[Volledig gecombineerde JSFiddle demo][10].

Het'is de moeite waard om verder op te merken dat de bovenstaande functie ook zal werken op alle input types.

Ik kan me geen eenvoudiger/gemakkelijker manier indenken! ;-)

Het gebruik van Anchor tags (Links) :

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

Om de Anchor tag in te schakelen:

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

Om de Anchor tag uit te schakelen:

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

@James Donnelly heeft een uitgebreid antwoord gegeven dat berust op het uitbreiden van jQuery met een nieuwe functie. Dat is een geweldig idee, dus ik ga zijn code aanpassen zodat het werkt zoals ik het nodig heb.

*Uitbreiding van 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)

Gebruik

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

De code zal een enkel element of een lijst van elementen verwerken.

Knoppen en ingangen ondersteunen de disabled eigenschap en, indien ingesteld op true, zullen ze er uitgeschakeld uitzien (met dank aan bootstrap) en zullen ze niet afgaan wanneer erop geklikt wordt.

Ankers ondersteunen de disabled eigenschap niet, dus in plaats daarvan gaan we vertrouwen op de .disabled klasse om ze er uitgeschakeld uit te laten zien (weer dankzij bootstrap) en een standaard klik event op te zetten dat de klik voorkomt door false terug te sturen (geen noodzaak voor preventDefault zie hier).

Noot: Je hoeft dit event niet los te haken bij het opnieuw inschakelen van ankers. Simpelweg de .disabled class verwijderen is voldoende.

Dit helpt natuurlijk niet als je een custom click handler aan de link hebt gekoppeld, iets wat vaak voorkomt bij gebruik van bootstrap en jQuery. Dus om dit op te lossen gaan we de isDisabled() extensie gebruiken om te testen op de .disabled class, zoals dit:

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

Ik hoop dat dit de zaken een beetje helpt vereenvoudigen.