1

Quiero que el label actue como un checkbox, he mirado este ejemplo pero a mi no me funciona... https://stackoverflow.com/questions/5523213/create-a-div-that-acts-like-an-html-checkbox

Tengo una estructura como esta:

    <div class="col-md-10 col-sm-10 centrar-div">
        <div class="col-md-2">
            <div class="checkbox">                                        
               <label class="label-cliente" for="clientes_type_muestraPrecio">
               <input type="checkbox" id="clientes_type_muestraPrecio" name="clientes_type[muestraPrecio]" value="1"> Muestra precio</label>
            </div>
        </div>
    </div>


.label-cliente {
        background: #5e5e5e;
        color: #ffffff;
    }
    .checkbox input[type=checkbox]:checked +.label-cliente{
        background: #2d89ef;

    }
1
  • Con esa misma estructura, no es posible, tendrías que emplear un script que cambie el orden de la estructura o que añada un span al label justo al lado del input, para que este se comporte como checkbox, pero no se si puedas o quieras, añadir a tu proyecto ese código javascript. Por cierto, esta estructura .checkbox 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. Commented el 3 abr. 2018 a las 16:40

1 respuesta 1

2

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>

11
  • No está funcionando de esta manera... Para empezar, los inputs están creados con symfony forms y tienen esta estructura en el inspector: a ver si te sirve... i.gyazo.com/298299d122b44af0e8e4416be609c70f.png
    – Pavlo B.
    Commented el 3 abr. 2018 a las 10:21
  • Le he quitado los divc con col-md-2 para que no tenga tanto lio
    – Pavlo B.
    Commented el 3 abr. 2018 a las 10:23
  • En esta pregunta de SO hablan de un caso como el tuyo y a tenor de las respuestas me parece que no es posible hacerlo puramente con CSS: stackoverflow.com/questions/13316966/…
    – Kiko_L
    Commented el 3 abr. 2018 a las 10:33
  • Y no se puede hacer algo del estilo de coger todos los input de tipo checkbox de una plantilla input[type=checkbox]:checked { background: blue}por ejemplo?
    – Pavlo B.
    Commented el 3 abr. 2018 a las 11:34
  • Cierto, podrías hacer algo así. Aunque más que por tipo filtraría por clase o por id para no afectar a otros elementos.
    – Kiko_L
    Commented el 3 abr. 2018 a las 12:22

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.