Publicado em 21 de jan.

ajuda com checkbox

#perguntas-e-respostas-rapidas #checkbox html java

Bom dia,

Preciso fazer uma tabela aonde dependendo da marcação outras são desativadas.

consegui usando as informações disponibilizadas pelo fórum chegar ao um código q faz isso.

o problema é que após eu desmarcar a opção as outras nao podem mais ser marcadas.

Ex-> ao marcar "segunda", terça e quarta são desabilitados. porem se eu quiser voltar e desmarcar segunda para marcar teça ou quarta, não posso mais.

tenho pouca experiencia nessa área, estou ajudando um amigo.

se alguém souber como fazer para corrigir isso agradeço muito.

segue o código:

	<form>

	<form id="MODALIDADES">

	<table class="tg">

	  <tr>

	    <th class="tg-baqh"><b>MODALIDADES <b></th>

	    <th class="tg-baqh"><b>SEGUNDA<b></th>

	    <th class="tg-baqh"><b>TERÇA<b></th>

	    <th class="tg-baqh"><b>QUARTA<b></th>

	    <th class="tg-baqh"><b>QUINTA<b></th>

	    

	  </tr>

	    <td class="tg-dzk6"><b>JUDO I <font size="1">(SEGUNDAS E QUARTAS)</font><b></td>

	    <td><center> <input type='checkbox' name='SEGUNDA' id='SEGUNDA' value='1' onclick="teste2(this);" /></td>

	    <td><center> <input type='checkbox'name='TERÇA' id='TERÇA' value='1' onclick="teste2(this);" /></td>

	    <td><center> <input type='checkbox' name='QUARTA' id='QUARTA' value='1' onclick="teste2(this);" /></td>

	    <td><center> <input type='checkbox' name='QUARTA' id='QUINTA' value='1' onclick="teste2(this);" /></td>

	 </tr>

	 <td class="tg-dzk6"><b>CAPOEIRA <font size="1">(SEGUNDAS E QUARTAS)</font><b></td>

	    <td><center> <input type='checkbox' name='SEGUNDA II' id='SEGUNDA II' value='1' onclick="teste2(this);" /></td>

	     <td><center> <input type='checkbox' name='TERÇA II' id='TERÇA II' value='1' onclick="teste2(this);" /></td>

	    <td><center> <input type='checkbox' name='QUARTA II' id='QUARTA II' value='1' onclick="teste2(this);" /></td>

	    <td><center> <input type='checkbox' name='QUINTA II' id='QUINTA II' value='1' onclick="teste2(this);" /></td>

	</table><center>

	<script language="javascript">

	</script>

	<script language="javascript">

	function teste2(obj)

	{    

	    if (obj.checked == true) 

	    {

	         if (obj.id == 'SEGUNDA')

	        {

	            document.getElementById('TERÇA').disabled = true;

	            document.getElementById('SEGUNDA II').disabled = true;        

	        }

	    }

	 

	}

	</script>

	</form>

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 21 de jan.

Não entendi direito, primeiro você quer se marcar uma opção não possa marcar mais, depois diz que pode marcar outra?

Me perdi nisso.

Enfim vamos ao que entendi que se marcar qualquer opção todas as outras fiquem indisponíveis, primeiramente você vai ter que consertar o html, remover tudo e qualquer elemento identificador ID.

Depois atribuir o elemento class a cada input.

No código javascript executa-se um loop buscando todos elementos com class tal e fazemos a mágica acontecer.

Veja o exemplo:

Html

Spoiler

<!DOCTYPE html>

<html>
 <head>
 <meta charset="UTF-8">
 <script src="checkDisable.js" type="text/javascript"></script>
 </head>
 <body>
 <input type="checkbox" class="input_v" name="name1" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name2" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name3" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name4" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name5" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name6" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name7" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name8" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name9" onclick="inpt.marcar();"/>
 <input type="checkbox" class="input_v" name="name10" onclick="inpt.marcar();"/>

 <script>var inpt = new checkDisable();</script>
 </body>
</html>

  

	**Arquivo checkDisable.js**

 Spoiler

var checkDisable = function () {
 var $input = document.getElementsByClassName('input_v');
 var $quantBt = $input.length;
 var $i;

 this.marcar = function () {
 for ($i = 0; $i < $quantBt; $i++) {
 $input[$i].disabled = true;
 }
 };
};

  

	 

	No entanto desconheço uma forma de voltar atrás, uma vez que algum elemento do DOM é definido desabilitado, o navegar irá ignorar qualquer evento javascript vinculado a ele. Ou seja não será possível mais acionar a função por evento click ou qualquer outro que esteja vinculado ao elemento em questão. É necessário uma ação externa que pode ser por um button ou qualquer outra coisa.

Joao Cortat· 21 de jan.

oi Omar~,

realmente nao ficou bem explicado.

a funçao da formula esta fazendo o que pretendo, condicionar certas escolas. Ex: escolheu segunda, terça e quarta ficam desativadas.

o problema é que caso a pessoa erre a marcação nao tem mais volta.mesmo clicando no dia para dar uncheck as opçoes desabilitadas nao voltam mais. teria algum botao ou codigo q fizesse isso, deixar a tabela como de inicio ?

outro pedido, se nao for muito abuso, o código q estou utilizando esta correto, vai me fornecer os dados ?

nao tenho nenhuma experiencia nessa área. é a primeira vez que tento fazer um formulário.

obrigado!

Omar~· 21 de jan.

3 horas atrás, Joao Cortat disse:

oi Omar~,

realmente nao ficou bem explicado.

a funçao da formula esta fazendo o que pretendo, condicionar certas escolas. Ex: escolheu segunda, terça e quarta ficam desativadas.

outro pedido, se nao for muito abuso, o código q estou utilizando esta correto, vai me fornecer os dados ?

nao tenho nenhuma experiencia nessa área. é a primeira vez que tento fazer um formulário.

obrigado!

Sim o código que mostrou vai funcionar, só devo realsar que não use acentuações ou cedilhas no caso ID.TERÇA, use TERCA.

Você pode fazer com seu próprio código usando

Citar

 if (obj.id == 'SEGUNDA') {

     //ação a se tomar

 } else if (obj.id == 'TERCA') {

     // ação a se tomar

 }

	E assim vai validando todas as questões que achar necessário.

	 

	Só que para manipulação dos inputs modifique isso (No caso **#?** seria o ID do input que queira manipular)

	**document.getElementById('#?').disabled = true;**

	 

	para

	**document.getElementById('#?').setAttribute('disabled', 'disabled');**

	 

	E para deixar um input desabilitado acionável novamente pode suar isso

	**document.getElementById('#?').removeAttribute('disabled');**