[SOLUCIONADO] Desactivar div con css

estaisaderezados · #1 (**permalink**) 06/07/2015, 01:54

Hola,

Tengo 3 divs con 3 checkboxes respectivamente, cuando pulso el div, mediante css cambio el aspecto del mismo, el problema que tengo, es que los tres div tiene el mismo atributo id y lo que quisiera es que cuando marco el chechbox se desactive el div que lo almacena, es decir solo me funciona con el primer div, si marco por ejemplo el checkbox del segundo div, se desactiva el primer div, cuando debería desactivarse el segundo y lo mismo pasa con el tercero.

¿Cuál es la manera más práctica de resolver este tema con jquey?

Gracias,

fegm_4 · #2 (**permalink**) 06/07/2015, 14:16

Los id deben ser únicos para cada elemento. Esto es importante.

Puedes utilizar la función .parent() o .closest() para poder lograr el efecto que quieres. Si colocas el extracto del html puedo ayudarte

estaisaderezados · #3 (**permalink**) 07/07/2015, 01:23

Por supuesto, aquí va, muchas gracias:

<div class="col-md-4 col-md-4-minborder">
<div id="div-carrousel">
<span class="carrousel-topbottom">
<span class="pull-left carrousel-border"><strong class="text-padding">Seguros</strong></span>
<span class="pull-right text-padding-date">20-Jun-2015</span>
</span>
<p><img src="img/car.png" class="img-responsive center-block" /></p>
<p class="text-padding"><strong>Poliza</strong></p>
<span class="text-padding">
Nullam malesuada erat ut
turpis. Suspendisse urna nibh,
viverra non, semper suscipit,
posuere a, pede.
</span>
<div id="div-panel-offeroppor" class="text-center">Gestionar <input type="checkbox" class="checkbox-carrousel" /></div>
</div>
</div>
<div class="col-md-4 col-md-4-minborder">
<div id="div-carrousel">
<span class="carrousel-topbottom">
<span class="pull-left carrousel-border"><strong class="text-padding">Inversión</strong></span>
<span class="pull-right text-padding-date">10-Jun-2015<</span>
</span>
<p><img src="img/money.png" class="img-responsive center-block" /></p>
<p class="text-padding"><strong>Lorem</strong></p>
<span class="text-padding">
Nullam malesuada erat ut
turpis. Suspendisse urna nibh,
viverra non, semper suscipit,
posuere a, pede.
</span>
<div id="div-panel-offeroppor" class="text-center">Gestionar <input type="checkbox" class="checkbox-carrousel" /></div>
</div>
</div>
<div class="col-md-4 col-md-4-minborder">
<div id="div-carrousel">
<span class="carrousel-topbottom">
<span class="pull-left carrousel-border"><strong class="text-padding">Entrega</strong></span>
<span class="pull-right text-padding-date">12-May-2015<</span>
</span>
<p><img src="img/token.png" class="img-responsive center-block" /></p>
<p class="text-padding"><strong>Token</strong></p>
<span class="text-padding">
Nullam malesuada erat ut
turpis. Suspendisse urna nibh,
viverra non, semper suscipit,
posuere a, pede.
</span>
<div id="div-panel-offeroppor" class="text-center">Gestionado <input type="checkbox" class="checkbox-carrousel" checked /></div>
</div>
</div>

Este es el extracto del js que estoy empezando:

$(".checkbox-carrousel").click(function () {
if ($(".checkbox-carrousel").is(':checked')) {
alert("Marcado");
$("#div-carrousel").addClass("carrousel-disabled");
}
else
{
alert("No marcado");
$("#div-carrousel").removeClass("carrousel-disabled");
}
});

Un saludo y gracias de nuevo,

horusorion · #4 (**permalink**) 07/07/2015, 02:44

Hola buenos dias, yo te hice un codigo de prueba no como lo tienes tu pero si con la funcion del checkbox, de manera que puedes modificarlo como quieras, o solo guiarte. Por lo menos yo me guiaria, asi aprendo... jejeje!

Código HTML:

Ver original[HIGHLIGHT="PHP"]
[HIGHLIGHT="Javascript"]
<!DOCTYPE html>
<html>
<head>
    <title>carrusel</title>
    <!-- Codigo css-->
    <style type="text/css" media="screen">
        .divs{
            background: #069;
            padding: 10px;
            display: inline;
            width: 100px;
            margin:10px;
        }
    </style>
 
    <script src="jquery.js"></script>
    <script>
        //ahora aqui vamos con lo importante....
        $(document).ready(function(){
                //verificaremos cuando un check box sea cambiado...
                $(".checkbox").change(function(){
                    //ahora verificaremos el valor del atributo value
                    var valor = $(this).val();
 
                    //creamos el id
                    var id = "#"+valor;
                    //verificamos si esta checked o no
 
                    var check = $(this).is(":checked");
 
                    if(check){//esta desactivado
                        alert("Desactivado")
                        //como esta tildado la desactivamos
                        /*Yo cambiare el color y el borde para mostrar que esta desactivada, tu le agregaras los css que quieras*/
 
                        $(id).css({
                            /*Esta es una estructura de Json la sintaxis es "atributo" : "valor", se utiliza para ingresar varios css en una sola sentencia, cada atributo css va separado por coma */
 
                            "background":"#999",
                            "border":"1px solid red"
                        });
 
                    }else{//no esta activado
                        alert("Activado");
 
                        $(id).css({
                            /*Esta es una estructura de Json la sintaxis es "atributo" : "valor", se utiliza para ingresar varios css en una sola sentencia, cada atributo css va separado por coma */
 
                            /*aqui llevamos los valores a como estaban antes, o sea sin bordes y azul el fondo*/
 
                            "background":"#069",
                            "border":"none"
                        });
                    }
                });
        });
    </script>
</head>
<body>
 
<div id="div1" class="divs">
    <input type="checkbox" class="checkbox" value="div1">
</div>
 
<div id="div2" class="divs">
    <input type="checkbox" class="checkbox" value="div2">
</div >
 
<div id="div3" class="divs">
    <input type="checkbox" class="checkbox" value="div3">
</div>
 
</body>
</html>

[/HIGHLIGHT]
[/HIGHLIGHT]

horusorion · #5 (**permalink**) 07/07/2015, 02:45

Ah espero te haya podido ayudar... Saludos...

horusorion · #6 (**permalink**) 07/07/2015, 02:47

Ah el unico error que tiene es que si esta tildado el check y recargas la pagina aparece con el fondo original y el check tildado, por lo tanto deberias verificar si esta tildado al principio.

estaisaderezados · #7 (**permalink**) 07/07/2015, 04:38

Hola,

Me ha servido de muchísimo, ya lo tengo resuelto con lo que me has puesto, muchas gracias.

Saludos,