JQuery - Obtener el idpadre de una clase

   
Vista:

Obtener el idpadre de una clase

Publicado por hola (14 intervenciones) el 15/08/2015 08:33:12
buena gente!! tengo una consultita.
estoy haciendo un formulario como el siguiete

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
<div class="form-group">
<label name="eti_NombrePersona">Nombre</label>
<div class="valoralbloquear hide">Sin Nombre</div>
<input type="text" id="DeNombrePersona" name="txt_NombrePersona">
<div> <input type="checkbox" id="checkBox"class='checkBox'></div>
</div>
 
<div class="form-group">
<label name="eti_NumeroPersona">Numero</label>
<div class="valoralbloquear hide">Sin Numero</div>
<input type="text" id="DeNumeroPersona" name="txt_NumeroPersona">
<div> <input type="checkbox" id="checkBox" class='checkBox'></div>
</div>
</from>

el checkbox lo utilizo para cuando no sabe el dato lo prociona y el input queda bloquedo y le pongo el valor que esta en el div valoralbloquear .

lo que quiero saber es como hago para hacer click en el checkbox y me diga en que parte se hizo click , por ejemplo que se hizo click en el check de numero y se bloquee ese input.

el problema se me presenta al momento de conseguir el padre del click sobre el checkbox, al ser que todos los checkbox tienen la misma clase siempre me va a traer el primero. yo quiero hacer una sola funcion en jquery que pueda controlar todos los checkbox y que me bloquee el input correspondiente.

por si no quedo claro, quiero que al hacer click en el check de persona me bloquee el input de persona y al hacer click en el check de numero me bloquee la clase numero xq ahora si hago click en numero me da el primer elemento con esa clase en la que hice click y no el padre de numero

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.checkBox').change(function() {
//capturo el id del hermano del padre que le hizo click y lo guardo en variable
var mIdTioClick = '#' + $(this).parent().siblings('input').attr('id');
alert(mIdTioClick);
//controlo si el campo ya esta bloqueadolo desbloquea y le pone el foco
//si esta desbloqueado lo bloquea
if($(mIdTioClick).is('[readonly]')){
$(mIdTioClick).attr("readonly", false);
$(mIdTioClick).val('');
$(mIdTioClick).focus();
}else{
$(mIdTioClick).attr("readonly", true);
//a la misma altura que el padre del checkbox ponemos un div con la clase
//valoralbloquear y hide para que no se vea y le damos el valor que queremos
//que tenga el imput al estar bloqeuado con readonly
$(mIdTioClick).val($(mIdTioClick).parent().find( ".valoralbloquear" ).text());
$(mIdTioClick).css('background-color','');
$(mIdTioClick).css('border-color','');
}
});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas

Obtener el idpadre de una clase

Publicado por Vainas (96 intervenciones) el 15/08/2015 18:02:01
Buenas:

Creo que tu problema esta aqui:

1
$(mIdTioClick).attr("readonly", "");

o bien puedes usar:

1
$(mIdTioClick).prop("readonly", true);

Ya nos comentaras.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Obtener el idpadre de una clase

Publicado por hola (14 intervenciones) el 15/08/2015 20:32:43
Muchas gracias por tu respuesta, pero me sigue pasando lo mismo. si hago click en el primer chek box me boquea el primero, pero si hago click en el segundo check tambien me bloquea el primero y tendria que ser el segundo !
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Obtener el idpadre de una clase

Publicado por Vainas (96 intervenciones) el 15/08/2015 21:46:30
Buenas de nuevo:

A mi me funciona asi: http://jsfiddle.net/nhL4fxu6/

Ya nos comentas algo mas.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Obtener el idpadre de una clase

Publicado por hola (14 intervenciones) el 17/08/2015 02:27:48
muchas gracias por tu aporte. veo que funciona. recien probe quitando el jquery y me pasaba lo mismo, puede ser problema con el css??

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="form-group">
<!-- 
* el for en las etiquetas <label> 
* sirve para poder ponerle funcion js
* un ejemplo seria que al hacer click en la etiqueta
* te haga el foco al campo de texto
* si es para modificar mostramos un campo oculto con el valor del atributo
-->
<label for="entradaDeNumeroSocioEstablecimiento" name="eti_SocioPersona" >Numero de Socio</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-barcode"></i>
</div>
<div class="valoralbloquear hide">#Socio</div>
<input type="text" class="form-control numeric" id="entradaDeNumeroSocioEstablecimiento" placeholder="Numero de socio" name="txt_NumeroSocioEstablecimiento">
<!-- El check box DES-BLOQUE-->
<div id="a" class="input-group-addon" style="padding-top: 3px; padding-bottom: 3px; padding-right: 6px; padding-left: 9px;">
<input type="checkbox" id="checkBox" class="css-checkbox lrg checkBox"/> <!-- checked="checked" -->
<label for="checkBox" name="checkbox79_lbl" class="css-label lrg klaus" style=" height: 20px; margin-bottom: 0px; padding-left: 20px;"></label>
</div>
<!-- El check box DES-BLOQUE-->
</div>
</div>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
 
input[type=checkbox].css-checkbox {
	  position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}
 
input[type=checkbox].css-checkbox + label.css-label {
	padding-left:20px;
	height:15px;
	display:inline-block;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}
 
input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -15px;
}
.klaus{background-image:url('../img/klaus.png');}
 
input[type=checkbox].css-checkbox.med + label.css-label.med {
	padding-left:22px;
    height:17px;
	display:inline-block;
	line-height:17px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
    cursor:pointer;
}
 
input[type=checkbox].css-checkbox.med:checked + label.css-label.med {
 
    background-position: 0 -17px;
}
input[type=checkbox].css-checkbox.sme + label.css-label.sme {
	padding-left:22px;
    height:16px;
	display:inline-block;
	line-height:16px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
    cursor:pointer;
}
 
input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{
 
    background-position: 0 -16px;
}
input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
	padding-left:22px;
    height:20px;
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
    cursor:pointer;
}
 
input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
 
    background-position: 0 -20px;
}

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Obtener el idpadre de una clase

Publicado por Vainas (96 intervenciones) el 17/08/2015 10:06:25
Buenas:

He probado con tu css y si que me funciona con el codigo de jsfiddle. He tenido que quitar esto en el css para poder ver el checkbox:

1
2
3
4
5
6
input[type=checkbox].css-checkbox {
     /*position: absolute;*/
     /*overflow: hidden;*/
     /*height:1px;*/
     /*width:1px;*/
...

En el codigo que me dejas ahora solo sale un checkbox.

Voy a exponer tu problema a ver si es eso lo que quieres (he podido entender hasta dos cosas diferentes):

1. Quieres tener dos inputs y asociados a cada uno de ellos su propio checkbox y que al marcar el checkbox del primero se bloquee el primer input o que al marcar el checkbox del segundo se bloquee el segundo input.

2. Quieres tener dos inputs y un solo checkbox y que al marcar el primer input y luego el check se bloquee el primero o que al marcar el segundo input y el checkbox se bloquee el segundo input

Imagino que es la primera opcion. No logro reproducir tu problema de ninguna forma. Yo pruebo en chrome y al hacer click sobre el checkbox a me se me pone readonly y dentro sale un mensaje que viene dentro del div con class hide.

Podrias comprobar que no tengas id's repetidos por ejemplo y qu eel nombre de cada uno coincide con las llamadas dentro de jquery.

No entiendo cuando dices "recien probe quitando el jquery y me pasaba lo mismo".

Has probado a ver si la consola de chorme te arroja algun error.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Obtener el idpadre de una clase

Publicado por hola (14 intervenciones) el 17/08/2015 16:00:08
gracias por tu respuesta nuevamente.

Yo solamente subi una parte del formulario pero el tema es mas o menos asi. tengo un formulario con 10 input que cada 1 tiene un checkbox asociado. es la primera opcion que tu describes arriba.

Yo tenia un formulario donde le ponia un id unico a cada checkbox, entonces en jquery controlaba que si hacian click sobre ese checkbox me bloqueaba cierto input, hacia click en el checkbox de numero y le decia que me bloquera el input numero. El problema es que el codigo jquery me quedaba muy largo, porque lo unico que cambiaba para cada checkbox era el id del checkbox y el id del input a bloquear.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('#btn_CheckNumeroSocio').on('click',function(e){
e.preventDefault();
 
if($('#entradaDeNumeroSocioClientePersona').is('[readonly]') ){
$('#entradaDeNumeroSocioClientePersona').attr("readonly", false);
$('#espacio_CheckeoNumeroSocio').removeClass('hide');
$('#ico_CheckeadoNumeroSocio').addClass('hide');
$('#entradaDeNumeroSocioClientePersona').val('');
$('#entradaDeNumeroSocioClientePersona').focus();
 
}else{
 
$('#entradaDeNumeroSocioClientePersona').attr("readonly", true);
$('#espacio_CheckeoNumeroSocio').addClass('hide');
$('#ico_CheckeadoNumeroSocio').removeClass('hide');
$('#entradaDeNumeroSocioClientePersona').val('# Socio');
$("#entradaDeNumeroSocioClientePersona").css('background-color','');
$("#entradaDeNumeroSocioClientePersona").css('border-color','');
 
}
});

ese es para el numero de socio pero tenia que hacer lo mismo para otros input y me quedaba un codigo igual de largo que ese pero solamente cambian el id, remplazaba numero de socio por email por ejemplo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#btn_CheckEmail').on('click',function(e){
e.preventDefault();
 
if($('#entradaDeEmailClientePersona').is('[readonly]') ){
$('#entradaDeEmailClientePersona').attr("readonly", false);
$('#espacio_CheckeoEmail').removeClass('hide');
$('#ico_CheckeadoEmail').addClass('hide');
$('#entradaDeEmailClientePersona').val('');
$('#entradaDeEmailClientePersona').focus();
 
}else{
 
$('#entradaDeEmailClientePersona').attr("readonly", true);
$('#espacio_CheckeoEmail').addClass('hide');
$('#ico_CheckeadoEmail').removeClass('hide');
$('#entradaDeEmailClientePersona').val('Sin Correo electronico');
$("#entradaDeEmailClientePersona").css('background-color','');
$("#entradaDeEmailClientePersona").css('border-color','');
}
});

ahi creo que mas o menos me explico como lo hacia. lo que yo queria hacer es achicar el codigo jquery haciendolo que al hacer click en un checkbox cualquiera tome el padre y me bloque el input, que es lo que vs subiste al ejemplo y funciona perfectamente. ya veo como es que funciona.

con respecto a lo que puse que le quite el jquery quise decir que le borre ese codigo que tu habia subido de ejemplo, por lo tanto no controlaba la accion de que si hacia click en cierto input me tome el padre y me bloque el input. en teoria si hacias click en cierto checkbox ese checkbox queda marcado con un tic, pero lo que me pasa que hago click en cualquier checkbox y simpre me pone el tic en el primero. No se si me explico correctamente.

Desde ya muchas gracias por tu tiempo.


http://jsfiddle.net/holanaruto/Lm12d0y7/

Recien me di cuenta que no soy muy bueno explicando y lo hice en jsfiddle.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Obtener el idpadre de una clase

Publicado por hola (14 intervenciones) el 17/08/2015 16:51:12
Muchas gracias nuevamente por tu tiempo, ya lo resolvi. el problema era que yo le daba estilos al checkbox ocultandolo y suplantandolo por un label que cuando hacia click sobre ella con el for iba a el input y tenia asociado el mismo input para todos.

muchas gracias por su tiempo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Obtener el idpadre de una clase

Publicado por Vainas (96 intervenciones) el 18/08/2015 10:24:09
Buenas:

Ahora me daba cuenta con tu ultimo codigo sobre eso

Que bien que lo hayas resuelto.

Seguimos por aqui si hay dudas.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar