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>
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 clickif(checked){ $(this).removeClass('cerradoBTN'); $('span', this).text('Abierto'); }else{ $(this).addClass('cerradoBTN'); $('span', this).text('Cerrado'); }