Puoi disabilitare le schede in Bootstrap?

Puoi disabilitare le schede in Bootstrap 2.0 come puoi disabilitare i pulsanti?

È possibile rimuovere l' data-toggle="tab"attributo dalla scheda poiché è collegato mediante eventi live / delegati

A partire dalla versione 2.1, dalla documentazione di bootstrap su http://twitter.github.com/bootstrap/components.html#navs , puoi farlo.

Stato disabilitato

Per qualsiasi componente di navigazione (schede, pillole o elenco), aggiungi .disabled per i collegamenti grigi e senza effetti hover. I collegamenti rimarranno comunque selezionabili, a meno che non si rimuova l'attributo href. In alternativa, è possibile implementare JavaScript personalizzato per impedire tali clic.

Vedi https://github.com/twitter/bootstrap/issues/2764 per la discussione sull'aggiunta di funzionalità.

Ho aggiunto il seguente Javascript per impedire i clic sui collegamenti disabilitati:

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});

penso che la migliore soluzione sia disabilitare con css. Definisci una nuova classe e disattivi gli eventi del mouse su di essa:

.disabledTab{
    pointer-events: none;
}

E quindi assegni questa classe all'elemento li desiderato:

<li class="disabled disabledTab"><a href="#"> .... </a></li>

Puoi aggiungere / rimuovere la classe anche con jQuery. Ad esempio, per disabilitare tutte le schede:

$("ul.nav li").removeClass('active').addClass('disabledTab');

Ecco un esempio: jsFiddle

Non c'è bisogno di alcun jquery, solo una riga CSS

.nav-tabs li.disabled a {
    pointer-events: none;
}

Inoltre, sto usando la seguente soluzione:

$('a[data-toggle="tab"]').on('click', function(){
  if ($(this).parent('li').hasClass('disabled')) {
    return false;
  };
});

Ora aggiungi semplicemente la classe "disabilitata" alla scheda madre e li non funziona e diventa grigia.

Vecchia domanda ma mi ha indicato nella giusta direzione. Il metodo che ho scelto è stato quello di aggiungere la classe disabilitata a li e quindi aggiungere il seguente codice al mio file Javascript.

$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
    e.stopImmediatePropagation();
});

Questo disabiliterà qualsiasi collegamento in cui li ha una classe di disabilitato. Un po 'simile alla risposta di totas ma non verrà eseguito se ogni volta che un utente fa clic su un collegamento a scheda e non utilizza return false.

Spero che sia utile a qualcuno!

Per il mio uso, la soluzione migliore è stata una combinazione di alcune delle risposte qui, che sono:

• Aggiungendo la disabledclasse al li che voglio disabilitare

• Aggiungi questo pezzo di JS:

     `$(".nav .disabled>a").on("click", function(e) {
          e.preventDefault();
          return false;
      });`
  

• Puoi anche rimuovere l'attributo data-toggle = "tab" se vuoi che Bootstrap non interferisca affatto con il tuo codice.

**** NOTA **: ** Il codice JS qui è importante, anche se rimuovi l'interruttore dati perché altrimenti, aggiornerà il tuo URL aggiungendo il #your-idvalore ad esso, che non è raccomandato perché la tua scheda è disabilitata, quindi non dovrebbe essere accessibile.

Con solo CSS , è possibile definire due classi CSS.

<style type="text/css">
    /* Over the pointer-events:none, set the cursor to not-allowed.
    On this way you will have a more user friendly cursor. */
    .disabledTab {
        cursor: not-allowed;
    }
    /* Clicks are not permitted and change the opacity. */
    li.disabledTab > a[data-toggle="tab"] {
        pointer-events: none;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }
</style>

Questo è un modello html. L'unica cosa necessaria è impostare la classe sull'elemento dell'elenco preferito.

<ul class="nav nav-tabs tab-header">
    <li>
        <a href="#tab-info" data-toggle="tab">Info</a>
    </li>
    <li class="disabledTab">
        <a href="#tab-date" data-toggle="tab">Date</a>
    </li>
    <li>
        <a href="#tab-photo" data-toggle="tab">Photo</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab-info">Info</div>
    <div class="tab-pane active" id="tab-date">Date</div>
    <div class="tab-pane active" id="tab-photo">Photo</div>
</div>

Supponiamo che questo sia il tuo TAB e che tu voglia disabilitarlo

<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>

Quindi puoi anche disabilitare questa scheda aggiungendo css dinamico

$('#groups').css('pointer-events', 'none')

Oltre alla risposta di James:

Se è necessario disabilitare il collegamento, utilizzare

$('a[data-toggle="tab"]').addClass('disabled');

Se è necessario impedire a un collegamento disabilitato di caricare la scheda

$('a[data-toggle="tab"]').click(function(e){

            if($this.hasClass("disabled")){

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Se è necessario non riuscire al collegamento

$('a[data-toggle="tab"]').removeClass('disabled');

Ho provato tutte le risposte suggerite, ma alla fine l'ho fatto funzionare in questo modo

if (false) //your condition
{
    $("a[data-toggle='tab'").prop('disabled', true);
    $("a[data-toggle='tab'").each(function () {
        $(this).prop('data-href', $(this).attr('href')); // hold you original href
        $(this).attr('href', '#'); // clear href
    });                
    $("a[data-toggle='tab'").addClass('disabled-link');
}
else
{
    $("a[data-toggle='tab'").prop('disabled', false);
    $("a[data-toggle='tab'").each(function () {
        $(this).attr('href', $(this).prop('data-href')); // restore original href
    });
    $("a[data-toggle='tab'").removeClass('disabled-link');
}
// if you want to show extra messages that the tab is disabled for a reason
$("a[data-toggle='tab'").click(function(){
   alert('Tab is disabled for a reason');
});

Nessuna delle risposte funziona per me. Rimuovi data-toggle="tab"da aimpedisce l'attivazione della scheda, ma aggiunge anche l' #tabIdhash all'URL. Questo è inaccettabile per me. Ciò che è anche inaccettabile è l'utilizzo di JavaScript.

A cosa funziona viene aggiunta la disabledclasse lie rimuovendo l' hrefattributo del suo contenimento a.

le mie schede erano in pannelli, quindi ho aggiunto un class = 'disabled' all'ancoraggio delle schede

in javascript ho aggiunto:

$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    if ($(this).hasClass('disabled')){
        e.preventDefault();
        return false;
    }
})

e per la presentazione in meno ho aggiunto:

.panel-heading{
    display:table;
    width:100%;
    padding-bottom:10px;
    ul.nav-tabs{
        display:table-cell;
        vertical-align:bottom;
        a.disabled{
            .text-muted;
            cursor:default;
            &:hover{
                background-color:transparent;
                border:none;
            }
        }
    }
}

La soluzione più semplice e pulita per evitare questo è l'aggiunta onclick="return false;"al atag.

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#home" onclick="return false;">Home</a>
    </li>    
    <li>
        <a href="#ApprovalDetails" onclick="return false;">Approval Details</a>
    </li>
</ul>

• L'aggiunta "cursor:no-drop;"rende il cursore semplicemente disabilitato, ma è selezionabile , Url si accoda con target href per espage.apsx#Home
• Non è necessario aggiungere "disabled"classe alla <li>rimozione ANDhref

È possibile disabilitare una scheda in bootstrap 4 aggiungendo classe disabledal figlio di nav-item come segue

<li class="nav-item">
    <a class="nav-link disabled" data-toggle="tab" href="#messages7" role="tab" aria-expanded="false">
        <i class="icofont icofont-ui-message"></i>Home</a>
    <div class="slide"></div>
</li>

Ecco il mio tentativo. Per disabilitare una scheda:

1. Aggiungi la classe "disabilitata" alla LI della scheda;
2. Rimuovere l'attributo 'data-toggle' da LI> A;
3. Sopprime l'evento 'clic' su LI> A.

Codice:

var toggleTabs = function(state) {
    disabledTabs = ['#tab2', '#tab3'];
    $.each(disabledTabs, $.proxy(function(idx, tabSelector) {
        tab = $(tabSelector);
        if (tab.length) {
            if (state) {
                // Enable tab click.
                $(tab).toggleClass('disabled', false);
                $('a', tab).attr('data-toggle', 'tab').off('click');
            } else {
                // Disable tab click.
                $(tab).toggleClass('disabled', true);
                $('a', tab).removeAttr('data-toggle').on('click', function(e){
                    e.preventDefault();
                });
            }
        }
    }, this));
};

toggleTabs.call(myTabContainer, true);