Ir para conteúdo

Arquivado

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

  • 0
Joao Cortat

ajuda com checkbox

Perguntado por Joao Cortat

Pergunta

Joao Cortat    0

Joao Cortat
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

3 respostas a esta questão

Recommended Posts

Omar~    87

Omar~
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Joao Cortat    0

Joao Cortat
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado
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.

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!

 

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');

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para lista de Perguntas Perguntas e respostas rápidas
×

Informação importante

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

  Aceito