Desactivado

Funcionalidades que desvinculan los eventos asociados a los elementos y cambia su apariencia para mostrarle al usuario que temporalmente esos elementos no están activos.
En sitios dinámicos es ncesario disponer de la capacidad de apagar un elemento en determinadas circunstancias y es por ello que utilizaremos la clase .desactivado.
Desde la versión 5.8.0 se ha implementado la capacidad de revertir cambios en los elementos, es decir que cuando la clase .desactivado se le aplica a un elemento, se desactivan todos los eventos asociados a él y su apariencia y cuando se le quita la clase, se activan todos los eventos asociados a él y su apariencia de manera automática.
Ya no es necesario volver a añadirle los atributos removidos manualmente.

Muestra de Elementos

Para clarificar de lo que trata esta sección de la documentación le aplicaremos la clase .desactivado a un botón, un enlace y un input.

Enlace Desactivado
Utilizando esta clase e incluyendo el archivo de js de la librería antes de la finalización de la etqueta html body se consigue anular completamente el elemento afectado por la clase .desactivado.
Para saber como incorporar el archivo con la lógica ver Get Started. 
    
    

        Enlace Desactivado

Código del Módulo

Para poder explicar mejor que realiza el módulo lo mejor es ver el código fuente que lleva a cabo esta tarea.
Código fuente

Esta funcionalidad se puede aplicar a cualquier elemento del dom, removiendo todos los eventos asociados a este elemento, y temporalmente dejandolo inhabilitado.

Ejemplos

Vamos a mostrar un conjunto de ejemplos en los cuales se aplica este concepto y no permitiendo la utilidad del elemento.

Checkbox

Tabs

Hola soy el inicio del tab!!

Hola soy los servicios del tab!!

Hola soy la galeria del tab!!

Hola soy el porfolio del tab!!

    

        // Inicialización del Tab 
        // Muestra de un tab desactivado
        BS.TabInit().iniciarBorde({contexto: "#tab",colorFuente: "c-black", colorFondo: "bg-white", colorBorde: "bg-black"})

Activar

Vamos a ver un ejemplo en el un elemento desativado se activa dinámicamente utilizando Vanilla JS para crear la funcionalidad del botón activador.

Enlace Desactivado 
    Enlace Desactivado
    

        
        
    


    document.getElementById("activador").addEventListener("click",() => {
       // Se remueve la clase desactivado
       // Automáticamente se reconfigura el atributo href
       document.getElementById("link_desact").classList.remove("desactivado")
    })
    document.getElementById("desactivador").addEventListener("click",() => {
       document.getElementById("link_desact").classList.add("desactivado")
    })
`r`n