Cambio de color de botón Bootstrap

publicado por: Anonymous

Tengo una pequeña aplicación que tiene un botón creado con Bootstrap:

<input id="boton" type="submit" name="proceso" class="btn btn-success" value="Proceso">

Mi idea es que al pulsar el botón una vez, cambie de color o cambie la clases bootstrap a:

class="btn btn-danger"

Si vuelvo a pulsar, pues que me vuelva a btn-success

Tengo que tener en cuenta de que los usuarios hacen login, es decir que si pulsan el botón y el botón se pone rojo, cuando vuelvan a entrar en la aplicación, el botón debe seguir estando rojo.

¿Alguna ayuda? Gracias!

solución

Usando la función .click() obtienes el evento de pulsar el botón y capturando la clase con .attr('class') puedes saber que tienes puesto y modificarlo con el siguiente ejemplo:

_x000D_

_x000D_

        $("#boton").click(function () {           _x000D_
        _x000D_
            var clase = $('#boton').attr('class');_x000D_
_x000D_
            if (clase.includes("btn-success")) {                        _x000D_
                $('#boton').removeClass('btn-success');_x000D_
                $('#boton').addClass('btn-danger');_x000D_
            } else {_x000D_
                $('#boton').removeClass('btn-danger');_x000D_
                $('#boton').addClass('btn-success');_x000D_
            }           _x000D_
        });

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<input id="boton" type="submit" name="proceso" class="btn btn-success" value="Proceso">

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *