0

Tengo una web con un navbar y un login donde tengo varios botones, uno activado (darse de alta) y los demás desactivados. La idea es que cuando un usuario se de de alta y se logué, se activen los demás botones que están en disabled.

Aquí tengo mi navbar:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="login.html">MiWeb.es</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Alta </a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" id ="Noticias" aria-disabled="true">Alta Noticia</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Alta productos</a>
        </li>
                <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Inscribirse</a>
        </li>
                <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="false">Otros</a>
        </li>
        
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle disabled" data-toggle="dropdown" href="#">Listados</a>        
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Listado Clientes</a>
          <a class="dropdown-item" href="#">productos</a>
          <a class="dropdown-item" href="#">etc</a>
        </div>
      </li>
               
    
    <li class="nav-item">       
    <div class="box">
    <input type="text" id="usuario" placeholder="Usuario" />    
    <input type="password" id="password" placeholder="Contraseña" /> 
    <input type="button" value="Iniciar sesión" onclick="Comprueba();"/>     
    </div>  
    <div id="mensaje"></div>   <!-- mensaje de usuario correcto o no   >-->
    </li>
    
      </ul>
    </div>
  </div>
</nav>

Mi funcion js para el login:

    <script type="text/javascript">  
 function Comprueba(){
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data){
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>"); 
        div = document.getElementById('Noticias'); //mostrar boton noticias.
        //div.style.display = ''; Esto lo tenia así antes y me funcionaba usando Css    

      else{  
        $("#mensaje").html("<span class='roja'>Usuario no válido</span>");
     }
  });   
 }

En mi versión anterior, usando css me funcionaba pero usando bootstrap y poniendo disabled no se como acceder ni como hacer para que se ponga enabled o directamente quite el disable para que lo muestre. Espero puedan ayudarme gracias.

2
  • Con esta linea: $( "#Noticia" ).addClass( "active"); he conseguido que se ilumine el boton pero no me deja hacer click, he probado con removeClass("disable") o addClase("enable") y no me funciona.
    – John Doe
    el 11 jul. 2021 a las 22:25
  • Resuelto, tenia que añadir estas dos lineas:$("#Noticias").removeClass( "disabled"); $("#Noticias").addClass( "active"); y tenia mal escrito "disabled".
    – John Doe
    el 11 jul. 2021 a las 22:31

1 respuesta 1

0

Añadiendo estas dos líneas la función quedaría:

 <script type="text/javascript">  
 function Comprueba(){
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data){
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>"); 
        div = document.getElementById('Noticias'); //mostrar boton noticias.
         $("#Noticias").removeClass( "disabled"); 
         $("#Noticias").addClass( "active");
         }
      else{  
        $("#mensaje").html("<span class='roja'>Usuario no válido</span>");
     }
  });   
 }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.