0

Buenas tardes estoy intentando cambiar un botón checkbox con jquery, tanto el background como el texto. El texto me lo cambia bien, pero el background me pone primero el removeClass y en una primera instacia lo quiero checked

$('label').click(function () {
      var checked = $('input', this).is(':checked');
      //$('span', this).text(checked ? 'Abierto' : 'Cerrado');

      if(checked){
          $(this).addClass('cerradoBTN');
          $('span', this).text('Abierto');
      }else{
          $(this).removeClass('cerradoBTN');
          $('span', this).text('Cerrado');
      }
  });
.cerradoBTN {
    background-color: red!important;
    border-color: red!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="bd-highlight mr wBoton">
    <div class="btn-group form-group w100">
        <label id="elLunes" class="btn btn-success btnAbierto">
            <input type="checkbox" id="elLunes" class="disNone" checked/>              <span>Abierto</span>
        </label>
    </div>
</div>

4
  • Y por qué no añades la clase cerradoBTN directamente a tu label al principio?? Si ese es el estado en el que debe empezar... Porque tu código no se va a ejecutar hasta que hagas el primer click, ergo no va a aplicar la clase al cargar, si no tras cada click
    – Benito-B
    Commented el 28 ene. 2022 a las 18:24
  • Hola @Benito-B no, por que como digo en la pregunta los quiero todos activados y no han de llevar esa clase, si no hay otra forma puedo hacer lo que dices, pero que en lugar de rojo sea verde y cuando hace el remove quite esa clase verde
    – Miguel
    Commented el 28 ene. 2022 a las 18:26
  • 2
    Hola, ¿no están invertidas tus condiciones?, si está marcado entonces esta verde (como en el estado inicial), si no está marcado entonces es rojo, por lo que tienes que agregar la clase cerradoBTN en la parte falsa del la condición y removerla en la parte verdadera. if(checked){ $(this).removeClass('cerradoBTN'); $('span', this).text('Abierto'); }else{ $(this).addClass('cerradoBTN'); $('span', this).text('Cerrado'); } Commented el 28 ene. 2022 a las 18:46
  • Es perfecto @AbrahamChan tienes toda la razón. Si eres tan amable publicalo como respuesta para marcarla como correcta y por si le sirve a alguien en un futuro.
    – Miguel
    Commented el 28 ene. 2022 a las 19:09

1 respuesta 1

2

Creo que tienes una confusión en como se encuentra el estado checked del input dentro de la funcion click. Cada vez que haces click ya ha cambiado de forma automatica el estado checked del input, por tanto solo tienes que invertir el uso de removeClass y addClass. Sin embargo el texto era correcto.

$('label').click(function () {
      var checked = $('input', this).is(':checked');
      //$('span', this).text(checked ? 'Abierto' : 'Cerrado');

      if(checked){
          $(this).removeClass('cerradoBTN');
          $('span', this).text('Abierto');
      }else{
          $(this).addClass('cerradoBTN');
          $('span', this).text('Cerrado');
      }
  });
.cerradoBTN {
    background-color: red!important;
    border-color: red!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="bd-highlight mr wBoton">
    <div class="btn-group form-group w100">
        <label id="elLunes" class="btn btn-success btnAbierto">
            <input type="checkbox" id="elLunes" class="disNone" checked/>              <span>Abierto</span>
        </label>
    </div>
</div>

Tu Respuesta

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

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