Edito con solución JS (Jquery)
$(document).ready(function(){
//Seleccionamos todos los checkboxes y editamos su label más cercana
$("input:not(:checked)").closest("label").css("background-color", "#505050");
$("input:checked").closest("label").css("background-color", "green");
//Ten en cuenta que estamos seleccionando por clase label-cliente. Como estamos jugando con los children (en este caso los input) no deberías tener problemas si tienes varios label/input pero tenlo en cuenta.
$(".label-cliente").click(function(){
//Si el hijo está checked le ponemos a la label el color #2d89ef si no el #5e5e5e
if($(this).children().is(":checked"))
{
$(this).css( "background-color", "green" );
}
else
{
$(this).css( "background-color", "#505050" );
}
});
});
.label-cliente{
background-color: #505050;
color: #ffffff;
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
}
.checkbox-cliente[type=checkbox]{
display:none;
}
.checkbox-cliente[type=checkbox]:checked + .checkbox-cliente{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formularioEditarCliente" action="/app_dev.php/gestion_usuarios_portal/43007414/clienteedit" method="post" enctype="multipart/form-data">
<div class="col-md-10 col-sm-10 centrar-div">
<div class="row">
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraPrecio"><input type="checkbox" id="clientes_type_muestraPrecio" name="clientes_type[muestraPrecio]" class="checkbox-cliente" value="1" checked="checked"> Muestra precio</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraDescuento"><input type="checkbox" id="clientes_type_muestraDescuento" name="clientes_type[muestraDescuento]" class="checkbox-cliente" value="1" checked="checked"> Muestra descuento</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraStock"><input type="checkbox" id="clientes_type_muestraStock" name="clientes_type[muestraStock]" class="checkbox-cliente" value="1" checked="checked"> Muestra stock</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraNotas"><input type="checkbox" id="clientes_type_muestraNotas" name="clientes_type[muestraNotas]" class="checkbox-cliente" value="1" checked="checked"> Muestra notas</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraVerde"><input type="checkbox" id="clientes_type_muestraVerde" name="clientes_type[muestraVerde]" class="checkbox-cliente" value="1" checked="checked"> Muestra verde</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraPVPRecomendado"><input type="checkbox" id="clientes_type_muestraPVPRecomendado" name="clientes_type[muestraPVPRecomendado]" class="checkbox-cliente" value="1" checked="checked"> Muestra p v p recomendado</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraPrecioNeto"><input type="checkbox" id="clientes_type_muestraPrecioNeto" name="clientes_type[muestraPrecioNeto]" class="checkbox-cliente" value="1"> Muestra precio neto</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_descubreDescuento"><input type="checkbox" id="clientes_type_descubreDescuento" name="clientes_type[descubreDescuento]" class="checkbox-cliente" value="1"> Descubre descuento</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_comprarNegativo"><input type="checkbox" id="clientes_type_comprarNegativo" name="clientes_type[comprarNegativo]" class="checkbox-cliente" value="1"> Comprar negativo</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_limiteStock"><input type="checkbox" id="clientes_type_limiteStock" name="clientes_type[limiteStock]" class="checkbox-cliente" value="1"> Limite stock</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_filtraMarcas"><input type="checkbox" id="clientes_type_filtraMarcas" name="clientes_type[filtraMarcas]" class="checkbox-cliente" value="1"> Filtra marcas</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_consultaPedidos"><input type="checkbox" id="clientes_type_consultaPedidos" name="clientes_type[consultaPedidos]" class="checkbox-cliente" value="1"> Consulta pedidos</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_consultaAlbaranes"><input type="checkbox" id="clientes_type_consultaAlbaranes" name="clientes_type[consultaAlbaranes]" class="checkbox-cliente" value="1"> Consulta albaranes</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraObservacionesArticulo"><input type="checkbox" id="clientes_type_muestraObservacionesArticulo" name="clientes_type[muestraObservacionesArticulo]" class="checkbox-cliente" value="1"> Muestra observaciones articulo</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_consultaAlbaranesPorFechas"><input type="checkbox" id="clientes_type_consultaAlbaranesPorFechas" name="clientes_type[consultaAlbaranesPorFechas]" class="checkbox-cliente" value="1"> Consulta albaranes por fechas</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_consultaPedidosPorFechas"><input type="checkbox" id="clientes_type_consultaPedidosPorFechas" name="clientes_type[consultaPedidosPorFechas]" class="checkbox-cliente" value="1"> Consulta pedidos por fechas</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_anyadeArticulosAsociadosCesta"><input type="checkbox" id="clientes_type_anyadeArticulosAsociadosCesta" name="clientes_type[anyadeArticulosAsociadosCesta]" class="checkbox-cliente" value="1"> Anyade articulos asociados cesta</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_muestraStockAlmacenes"><input type="checkbox" id="clientes_type_muestraStockAlmacenes" name="clientes_type[muestraStockAlmacenes]" class="checkbox-cliente" value="1"> Muestra stock almacenes</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_consultaNeumaticos"><input type="checkbox" id="clientes_type_consultaNeumaticos" name="clientes_type[consultaNeumaticos]" class="checkbox-cliente" value="1"> Consulta neumaticos</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_consultaArticulosPorMarca"><input type="checkbox" id="clientes_type_consultaArticulosPorMarca" name="clientes_type[consultaArticulosPorMarca]" class="checkbox-cliente" value="1"> Consulta articulos por marca</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_consultaPedidosPendientes"><input type="checkbox" id="clientes_type_consultaPedidosPendientes" name="clientes_type[consultaPedidosPendientes]" class="checkbox-cliente" value="1"> Consulta pedidos pendientes</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_mostrarFondoPersonalizado"><input type="checkbox" id="clientes_type_mostrarFondoPersonalizado" name="clientes_type[mostrarFondoPersonalizado]" class="checkbox-cliente" value="1"> Mostrar fondo personalizado</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_mostrarReferenciasInternas"><input type="checkbox" id="clientes_type_mostrarReferenciasInternas" name="clientes_type[mostrarReferenciasInternas]" class="checkbox-cliente" value="1"> Mostrar referencias internas</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_mostrarSoloVerdesCuandoHayStock"><input type="checkbox" id="clientes_type_mostrarSoloVerdesCuandoHayStock" name="clientes_type[mostrarSoloVerdesCuandoHayStock]" class="checkbox-cliente" value="1"> Mostrar solo verdes cuando hay stock</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_ordenargruposMontajePorArticulo"><input type="checkbox" id="clientes_type_ordenargruposMontajePorArticulo" name="clientes_type[ordenargruposMontajePorArticulo]" class="checkbox-cliente" value="1"> Ordenargrupos montaje por articulo</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_desglosaStockAlmacenMasTotal"><input type="checkbox" id="clientes_type_desglosaStockAlmacenMasTotal" name="clientes_type[desglosaStockAlmacenMasTotal]" class="checkbox-cliente" value="1"> Desglosa stock almacen mas total</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_mostrarNetoConPvpDto"><input type="checkbox" id="clientes_type_mostrarNetoConPvpDto" name="clientes_type[mostrarNetoConPvpDto]" class="checkbox-cliente" value="1"> Mostrar neto con pvp dto</label>
</div>
<div class="checkbox">
<label class="label-cliente col-md-3" for="clientes_type_accesosTecdoc"><input type="checkbox" id="clientes_type_accesosTecdoc" name="clientes_type[accesosTecdoc]" class="checkbox-cliente" value="1"> Accesos tecdoc</label>
</div>
</div>
</div>
</form>
codepen
Respuesta original:
Tienes mal formado el html
. El input
no está bien cerrado (lo estás cerrando con un </label>
)
Además, no estás ocultando el checkbox (entiendo que quieres hacerlo).
.label-cliente {
background: #5e5e5e;
color: #ffffff;
}
.checkbox input[type=checkbox]{
display: none;
}
.checkbox input[type=checkbox]:checked +.label-cliente{
background: #2d89ef;
}
<div class="col-md-10 col-sm-10 centrar-div">
<div class="col-md-2">
<div class="checkbox">
<input type="checkbox" id="clientes_type_muestraPrecio" name="clientes_type[muestraPrecio]" value="1"/>
<label class="label-cliente" for="clientes_type_muestraPrecio">Muestra precio</label>
</div>
</div>
</div>
input[type=checkbox]:checked +.label-cliente
no funcionará, porque sólo puedes (con css) simular "un evento de click" para aplicar estilos únicamente al hermano o hijo, pero no al padre, contenedor o ancestro.