Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

~Thiago Lara

[Resolvido] Limitar o número de seleções para checkbox

Por , em Javascript

Recommended Posts

~Thiago Lara    0

~Thiago Lara
Postado

Pessoal,

Belezera?

Bom tou com um probleminha, tenho esse formulário:

 

http://sistemas.mapademinas.com.br/britishcouncil/inscricao.asp

 

E não entendo muito de JS, porém consegui fazer uma coisa aqui e outra ali, hahaha

o meu grande problema agora é,

na parte das palestras, bem no meio do form, preciso limitar a pessoa a selecionar apenas 3, e quando isso acontecer, todas as outras opções ficarem "disabled" gostaria se possível me ajudassem, pois nem sei por onde começar, até porque, como eu disse não entendo tanto de Javascript.

 

Estou no aguardo!

Grande abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Para selecionar uma quantidade máxima de checkboxes, você pode definir uma váriável e testar (a cada clique do mouse em um dos checkboxes) se esse valor foi alcançado. Além disso, enquanto o limite de checkboxes selecionados não tiver sido atingido, todos os demais checkboxes ficarão habilitados para possíveis seleções.

 

Entretanto, quando o limite for atingido, os demais checkboxes não selecionados receberão o parâmetro: disabled = true (evitando com isso novas seleções).

 

O código abaixo foi testado no IE7, FF e Chrome:

<html>
<head>
<script type="text/javascript">
var CheckMaximo = 3;



function verificar() {
var Marcados = 1;
var objCheck = document.forms['form1'].elements['mulheres'];

//Percorrendo os checks para ver quantos foram selecionados:
for (var iLoop = 0; iLoop<objCheck.length; iLoop++) {
	//Se o número máximo de checkboxes ainda não tiver sido atingido, continua a verificação:
	if (Marcados <= CheckMaximo) {
		if (objCheck[iLoop].checked) {
			Marcados++;
		}
			//Habilitando todos os checkboxes, pois o máximo ainda não foi alcançado.
			for (var i=0; i<objCheck.length; i++) {
				objCheck[i].disabled = false;
			}	
	//Caso contrário, desabilitar o checkbox;
	//Nesse caso, é necessário percorrer todas as opções novamente, desabilitando as não checadas;
	} else {
		for (var i=0; i<objCheck.length; i++) {
			if(objCheck[i].checked == false) {
				objCheck[i].disabled = true;
			}	
		}
	}
}
}
</script>
</head>
<body>
<form name="form1" action="paginaPHPouASP" method="post">
Para você, a mulher ideal deve ser...
<br>Obs: Você pode escolher até 3 opções!
<br><br><input type="checkbox" id="mulheres" value="Loira" onclick="verificar()"> Loira
<br><input type="checkbox" id="mulheres" value="Morena" onclick="verificar()"> Morena
<br><input type="checkbox" id="mulheres" value="Alta" onclick="verificar()"> Alta
<br><input type="checkbox" id="mulheres" value="Baixa" onclick="verificar()"> Baixa
<br><input type="checkbox" id="mulheres" value="Magra" onclick="verificar()"> Magra
<br><input type="checkbox" id="mulheres" value="Malhada" onclick="verificar()"> Malhada
<br><input type="checkbox" id="mulheres" value="Gordinha" onclick="verificar()"> Gordinha
<br><input type="checkbox" id="mulheres" value="Seria" onclick="verificar()"> Séria
<br><input type="checkbox" id="mulheres" value="Brincalhona" onclick="verificar()"> Brincalhona
<br><input type="checkbox" id="mulheres" value="Inteligente" onclick="verificar()"> Inteligente
<br><input type="checkbox" id="mulheres" value="Submissa" onclick="verificar()"> Submissa
<br><input type="checkbox" id="mulheres" value="Nervosa" onclick="verificar()"> Nervosa
<br><input type="checkbox" id="mulheres" value="Calma" onclick="verificar()"> Calma
<br><input type="checkbox" id="mulheres" value="Misteriosa" onclick="verificar()"> Misteriosa
<br><input type="checkbox" id="mulheres" value="Falante" onclick="verificar()"> Falante
<br><input type="checkbox" id="mulheres" value="Risonha" onclick="verificar()"> Risonha
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

~Thiago Lara    0

~Thiago Lara
Postado

Opa, Valeu cara deu certinho!

Se quiser dar uma olhada!!

 

http://sistemas.mapademinas.com.br/britishcouncil/inscricao.asp

 

eu ainda adicionei uma opção, que no caso tem cidade que só podem selecionar 2 palestras, aí bloqueia para 2 ou 3 quando chega no limite!

Mas no mais deu tudo ok!

Valeu mesmo

:D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Ressalva:

A solução apresentada usa id="mulheres" para todos os checkboxes.

Isto está em desacordo com os padrões web que preconizam o uso de

UM e somente UM atributo id com determinado valor em uma mesma página.

Que tal pensar em outra solução?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Excelente observação. Foi falta de atenção de minha parte.

 

Segue o novo código:

<html>
<head>
<script type="text/javascript">
var CheckMaximo = 3;



function verificar() {
var Marcados = 1;
var objCheck = document.forms['form1'].elements['mulheres'];

//Percorrendo os checks para ver quantos foram selecionados:
for (var iLoop = 0; iLoop<objCheck.length; iLoop++) {
        //Se o número máximo de checkboxes ainda não tiver sido atingido, continua a verificação:
        if (Marcados <= CheckMaximo) {
                if (objCheck[iLoop].checked) {
                        Marcados++;
                }
                        //Habilitando todos os checkboxes, pois o máximo ainda não foi alcançado.
                        for (var i=0; i<objCheck.length; i++) {
                                objCheck[i].disabled = false;
                        }       
        //Caso contrário, desabilitar o checkbox;
        //Nesse caso, é necessário percorrer todas as opções novamente, desabilitando as não checadas;
        } else {
                for (var i=0; i<objCheck.length; i++) {
                        if(objCheck[i].checked == false) {
                                objCheck[i].disabled = true;
                        }       
                }
        }
}
}
</script>
</head>
<body>
<form name="form1" action="paginaPHPouASP" method="post">
Para você, a mulher ideal deve ser...
<br>Obs: Você pode escolher até 3 opções!
<br><br><input type="checkbox" name="mulheres" value="Loira" onclick="verificar()"> Loira
<br><input type="checkbox" name="mulheres" value="Morena" onclick="verificar()"> Morena
<br><input type="checkbox" name="mulheres" value="Alta" onclick="verificar()"> Alta
<br><input type="checkbox" name="mulheres" value="Baixa" onclick="verificar()"> Baixa
<br><input type="checkbox" name="mulheres" value="Magra" onclick="verificar()"> Magra
<br><input type="checkbox" name="mulheres" value="Malhada" onclick="verificar()"> Malhada
<br><input type="checkbox" name="mulheres" value="Gordinha" onclick="verificar()"> Gordinha
<br><input type="checkbox" name="mulheres" value="Seria" onclick="verificar()"> Séria
<br><input type="checkbox" name="mulheres" value="Brincalhona" onclick="verificar()"> Brincalhona
<br><input type="checkbox" name="mulheres" value="Inteligente" onclick="verificar()"> Inteligente
<br><input type="checkbox" name="mulheres" value="Submissa" onclick="verificar()"> Submissa
<br><input type="checkbox" name="mulheres" value="Nervosa" onclick="verificar()"> Nervosa
<br><input type="checkbox" name="mulheres" value="Calma" onclick="verificar()"> Calma
<br><input type="checkbox" name="mulheres" value="Misteriosa" onclick="verificar()"> Misteriosa
<br><input type="checkbox" name="mulheres" value="Falante" onclick="verificar()"> Falante
<br><input type="checkbox" name="mulheres" value="Risonha" onclick="verificar()"> Risonha
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

~Thiago Lara    0

~Thiago Lara
Postado

Ressalva:

A solução apresentada usa id="mulheres" para todos os checkboxes.

Isto está em desacordo com os padrões web que preconizam o uso de

UM e somente UM atributo id com determinado valor em uma mesma página.

Que tal pensar em outra solução?

 

O que sugeres? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Agora sim né! hehehe

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Sugiro usar outro tipo de identificador para reter e armazenar os checkboxes em uma variável.

Fica como desafio.

 

Editado: Ops! A solução foi dada. O autor substitui no codigo original o atributo id por name.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Vocês provavelmente postaram alguns segundos depois de mim.

 

A minha solução está no POST #5, ou seja, basta substituir o "id" por "name".

A intenção era ter deixado como "name=mulheres" mesmo.

Notem:

var objCheck = document.forms['form1'].elements['mulheres'];

Comecei a elaborar a solução de uma maneira (ex: id=mulheres1; id=mulheres2 etc) varrendo todas as opções, mas pensei em outra em seguida e, devido à pressa de revisão do código fonte, eu esqueci de substituir o "id" pelo "name".

 

Embora tenha funcionado no IE7, Chrome e FF, o uso de "id" não é aconselhado nesse caso, como bem observou o mestre Maujor acima!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

No código fornecido o loop deve ser alterado:

de

for (var i=0; i<objCheck.length; i++) {

para:

for (var i=1; i<objCheck.length; i++) {

no original são permitidos 4 checkboxes e não 3 como

proposto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não é isso ainda Maujor.

Esses loops, são responsáveis por habilitar ou desabilitar todos os checkboxs. Se eles começarem do 1, ao vez do 0, o primeiro checkbox, que é o elemento de indice 0 não será atingido.

 

Veja que só ocorre o 'bug' de poder selecionar 1 elemento a mais doque deveria, se você escolher o ultimo.

 

Tentei trocar por:

for (var iLoop = 0; iLoop<=objCheck.length; iLoop++) {
mas ai tem um 'erro de lógica', de irmos até um elemento q não existe.

Compartilhar este post

Link para o post
Compartilhar em outros sites

~Thiago Lara    0

~Thiago Lara
Postado

Realmente, existe o tal "bug" que se selecionarmos o último é possível ainda que selecione 3 + 1 ou seja 4, aí sim bloqueia...

 

Como podemos fazer entao hein? Alguma idéia?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Aff... eu não tinha visto isso! Perdoem-me, hehehe!!!

 

Ta aí:

<html>
<head>
<script type="text/javascript">
var CheckMaximo = 3;



function verificar() {
var Marcados = 1;
var objCheck = document.forms['form1'].elements['mulheres'];

//Percorrendo os checks para ver quantos foram selecionados:
for (var iLoop=0; iLoop<objCheck.length; iLoop++) {
//Se o número máximo de checkboxes ainda não tiver sido atingido, continua a verificação:
	if (objCheck[iLoop].checked) {
    	Marcados++;
	}
	
	if (Marcados <= CheckMaximo) {
	//Habilitando todos os checkboxes, pois o máximo ainda não foi alcançado.
    for (var i=0; i<objCheck.length; i++) {
    	objCheck[i].disabled = false;
    }       
    //Caso contrário, desabilitar o checkbox;
    //Nesse caso, é necessário percorrer todas as opções novamente, desabilitando as não checadas;
    
	} else {
		for (var i=0; i<objCheck.length; i++) {
			if(objCheck[i].checked == false) {
				objCheck[i].disabled = true;
			}       
      }
    }
}
}
</script>
</head>
<body>
<form name="form1" action="paginaPHPouASP" method="post">
Para você, a mulher ideal deve ser...
<br>Obs: Você pode escolher até 3 opções!
<br><br><input type="checkbox" id="mulheres" value="Loira" onclick="verificar()"> Loira
<br><input type="checkbox" name="mulheres" value="Morena" onclick="verificar()"> Morena
<br><input type="checkbox" name="mulheres" value="Alta" onclick="verificar()"> Alta
<br><input type="checkbox" name="mulheres" value="Baixa" onclick="verificar()"> Baixa
<br><input type="checkbox" name="mulheres" value="Magra" onclick="verificar()"> Magra
<br><input type="checkbox" name="mulheres" value="Malhada" onclick="verificar()"> Malhada
<br><input type="checkbox" name="mulheres" value="Gordinha" onclick="verificar()"> Gordinha
<br><input type="checkbox" name="mulheres" value="Seria" onclick="verificar()"> Séria
<br><input type="checkbox" name="mulheres" value="Brincalhona" onclick="verificar()"> Brincalhona
<br><input type="checkbox" name="mulheres" value="Inteligente" onclick="verificar()"> Inteligente
<br><input type="checkbox" name="mulheres" value="Submissa" onclick="verificar()"> Submissa
<br><input type="checkbox" name="mulheres" value="Nervosa" onclick="verificar()"> Nervosa
<br><input type="checkbox" name="mulheres" value="Calma" onclick="verificar()"> Calma
<br><input type="checkbox" name="mulheres" value="Misteriosa" onclick="verificar()"> Misteriosa
<br><input type="checkbox" name="mulheres" value="Falante" onclick="verificar()"> Falante
<br><input type="checkbox" name="mulheres" value="Risonha" onclick="verificar()"> Risonha
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roger Tas    0

Roger Tas
Postado

Pessoal, desculpem, o post é velho mas preciso perguntar algo...

Como posso retornar os valores dos checkbox em variável pelo php se todos tem o name mulheres?

Se eu alterar isso o java não funciona, se eu deixar tudo igual vem só 1 valor.

 

E outra coisa, ao usar um botão limpar os checkbox as opções bloqueadas não voltam ao normal

 

Muito obrigado.

 

 

obs: Qual dos screipts é o 100% valido? Ou último? Vi que apenas umas das opções tem ID

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, o correto seria que eles fossem assim:

 

<br><br><input type="checkbox" name="mulheres[]" value="Loira" onclick="verificar()"> Loira
<br><input type="checkbox" name="mulheres[]" value="Morena" onclick="verificar()"> Morena
e então, você receberá um array no server-side:

 

 

$_POST['mulheres'][0], $_POST['mulheres'][1]..

sendo que só chegarão oque for marcado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roger Tas    0

Roger Tas
Postado

Funcionou que é uma maravilha. Muito obrigado.

Sobre o botão limpar você tem alguma idéia? colocar um check no mesmo e zerar a contagem?

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Faz outro loop, percorrendo todos eles, que sete .checked = false;

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito