¿Puedes desactivar las pestañas en Bootstrap?

A partir de la versión 2.1, de la documentación de bootstrap en http://twitter.github.com/bootstrap/components.html#navs , puedes.

Estado deshabilitado

Para cualquier componente de navegación (pestañas, píldoras o lista), agregue .desactivado para gris enlaces y sin efectos de hover. Sin embargo, los enlaces seguirán siendo clicables, a menos que elimine el atributo href. Alternativamente, usted podría implementa JavaScript personalizado para evitar esos clics.

Véase https://github.com/twitter/bootstrap/issues/2764 para la característica añadir discusión.

Agregué el siguiente Javascript para evitar clics en enlaces deshabilitados:

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

Creo que la mejor solución es deshabilitar con css. Se define una nueva clase y se desactivan los eventos del ratón en ella:

.disabledTab{
    pointer-events: none;
}

Y luego se asigna esta clase al elemento li deseado:

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

También puede agregar/eliminar la clase con jQuery. Por ejemplo, para deshabilitar todas las pestañas:

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

Aquí hay un ejemplo: jsFiddle

También, estoy usando la siguiente solución:

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

Ahora simplemente agregar la clase 'disabled' a la li y tab padre no funciona y se vuelve gris.

No Necesita Ningún Jquery, Solo Una Línea CSS

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

Vieja pregunta pero me apuntó en la dirección correcta. El método que elegí fue agregar la clase disabled a la li y luego agregar el siguiente código a mi archivo Javascript.

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

Esto deshabilitará cualquier enlace donde la li tenga una clase de deshabilitado. Algo similar a la respuesta de totas, pero no ejecutará el si cada vez que un usuario haga clic en cualquier enlace de pestaña y no use return false.

Esperemos que sea útil para alguien!

Para mi uso, la mejor solución fue una mezcla de algunas de las respuestas aquí, que son :

• Añadiendo la clase disabled a la li Quiero desactivar

• Añadir esta pieza de JS:

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

• Incluso puede eliminar el atributo data-toggle="tab" si desea que Bootstrap no interfiera en absoluto con su código.

* * * * NOTA**: * * El código JS aquí es importante, incluso si elimina el data-toggle porque de lo contrario, actualizará su URL agregando el #your-id valor a la misma, que no se recomienda porque su ficha está desactivada, por lo que no se debe acceder.

Con sólo css, puede definir dos clases 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>

Esta es una plantilla html. Lo único que se necesita es establecer la clase a su elemento de lista preferido.

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

Además de la respuesta de Santiago:

Si necesita desactivar el enlace use

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

Si necesita evitar que un enlace deshabilitado cargue la pestaña

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

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

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Si necesita no puede el enlace

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

Supongamos que esta es tu PESTAÑA y quieres desactivarla

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

Así que también puede desactivar esta pestaña agregando css dinámico

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

Probé todas las respuestas sugeridas, pero finalmente hice que funcionara así

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

Ninguna de las respuestas funciona para mí. Remove data-toggle="tab" del a evita que la pestaña se active, pero también agrega el hash #tabId a la URL. Eso es inaceptable para mí. Lo que también es inaceptable es usar javascript.

Lo que funciona es agregar la clase disabled al li y eliminar el atributo href de su contenido a.

Mis pestañas estaban en paneles, así que agregué un class='disabled' al ancla de pestañas

En javascript agregué:

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

Y para la presentación en menos agregué:

.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 solución más fácil y limpia para evitar esto es agregar onclick="return false;" a la etiqueta a.

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

• Agregar {[3] } solo hace que el cursor se vea deshabilitado, pero es clickable , la url se agrega con el objetivo href para ex page.apsx#Home
• No es necesario agregar "disabled" clase a <li> Y eliminar href

Aquí está mi intento. Para deshabilitar una pestaña:

1. Añade la clase "disabled"a la LI de tab;
2. Elimina el atributo 'data-toggle' de LI > A;
3. Suprimir el evento 'click' en LI > A.

Código:

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