JQuery - Botones on off

 
Vista:
Imágen de perfil de George

Botones on off

Publicado por George (4 intervenciones) el 07/02/2017 13:03:11
Buenas!

Llevo unos días intentando hacer unas cosillas en JQuery.

Estos son mis botones:

1
2
3
4
5
<p><input type="button" id="helados" class="boton_productos" value="Helados"></p>
<p><input type="button" id="cafes" class="boton_productos" value="Cafés"></p>
<p><input type="button" id="bolleria" class="boton_productos" value="Bollería"></p>
<p><input type="button" id="refrescos" class="boton_productos" value="Refrescos"></p>
<p><input type="button" id="aperitivos" class="boton_productos" value="Aperitivos"></p>

Con esto les doy el estilo de jquery

1
$('.boton_productos').button().addClass('boton_mostrar_producto');

Y quiero que cuando haga clic en algún botón, ese se ponga disabled y luego cuando haga clic en otro, ese que estaba como disabled se active y al que le hice clic se ponga en disabled. Y asi con todos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function on_off_botones(e){
 
	//Esto me coge el boton que he seleccionado
	var el_pulsado=$("#" + e.target.id);
 
	if(el_pulsado.data('clicked', true)){
		alert("El boton se ha pulsado");
		el_pulsado.button("option","disabled",true);
	}
 
	//Aqui nose como poner para que cuando haya otro seleccionado, el de antes de active
	else{
		el_pulsado.button("option","disabled",false);
	}
}

Alguna idea de como hacerlo, porfavor?
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 Xavi
Val: 293
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Botones on off

Publicado por Xavi (14 intervenciones) el 07/02/2017 21:25:53
Hola George, como se activa la función on_off_botones()??

La manera de hacerlo, es cada vez que se pulsa una imagen, se ponen todos habilitados, y el que has pulsado se deshabilita, de esta manera, siempre tienes deshabilitado el que ha seleccionado el usuario.
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 George

Botones on off

Publicado por George (4 intervenciones) el 07/02/2017 22:07:09
Hola! La función on_off_botones() se activa cuando hago clic en un boton de class="boton_productos"
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 elporfirio

Botones on off

Publicado por elporfirio (14 intervenciones) el 08/02/2017 16:31:15
Hola amigo, la solucion, es:

"Habilitar todos los botones y deshabilitar el que se pulso"

Aqui tu ejemplo funcionando: https://jsfiddle.net/elporfirio/haarkkb4/


1
2
3
4
5
6
7
8
function onOffBotones(){
	$('.boton_productos').prop('disabled', false);
  $(this).prop('disabled', true);
}
 
$(document).ready(function(){
	$('.boton_productos').on('click', onOffBotones);
});

De ahí ya puedes agregar clases y todo lo demás :D
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
Imágen de perfil de George

Botones on off

Publicado por George (4 intervenciones) el 08/02/2017 17:46:46
Funciona! Muchísimas 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 George

Botones on off

Publicado por George (4 intervenciones) el 08/02/2017 18:24:39
mmm por lo que veo, me funciona a medias....seguro que algo tengo mal.

Aver...si pincho en uno no hace nada. Recargo la pagina y ya me lo marca como disabled y asi con todos. Tengo que recargar la pagina para que surja efecto.

En el html tengo:

1
2
3
4
5
<p><input type="button" id="helados" class="boton_productos" value="Helados"></p>
<p><input type="button" id="cafes" class="boton_productos" value="Cafés"></p>
<p><input type="button" id="bolleria" class="boton_productos" value="Bollería"></p>
<p><input type="button" id="refrescos" class="boton_productos" value="Refrescos"></p>
<p><input type="button" id="aperitivos" class="boton_productos" value="Aperitivos"></p>

Y en el .js tengo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
 
	add_botones();
 
	$('.boton_productos').on('click', on_off_botones);
 
});
 
function on_off_botones(){
	$('.boton_productos').prop('disabled', false);
 
	$(this).prop('disabled', true);
}
 
function add_botones(){
 
	$('.boton_productos').button();
}

Y en el .css tengo:

1
2
3
4
5
6
.ui-button.boton_productos{
    color: #A31621;
    margin-left: 15px;
    margin-top: 5px;
    width: 120px;
}
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
sin imagen de perfil
Val: 142
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Botones on off

Publicado por Horroroso (65 intervenciones) el 07/04/2017 22:04:17
Hola, no se si sea por eso, pero creo que te falta cerrar los input:

1
2
3
4
5
6
7
8
9
10
<p>
    <input type="button" id="helados" class="boton_productos" value="Helados" /></p>
<p>
    <input type="button" id="cafes" class="boton_productos" value="Cafés" /></p>
<p>
    <input type="button" id="bolleria" class="boton_productos" value="Bollería" /></p>
<p>
    <input type="button" id="refrescos" class="boton_productos" value="Refrescos" /></p>
<p>
    <input type="button" id="aperitivos" class="boton_productos" value="Aperitivos" /></p>

Revisalo..

Saludos
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