1

Preciso de ajuda para fazer um pequeno script que bloqueia o botão, caso tenha input's com os nomes diferentes selecionados, e que permita caso sejam iguais, ambos os casos com a mesma classe, e também que mostre o status de quais grupos estão selecionados.

<div id="lista">
	<!-- grupo x-->
	<input name="x" class="caixa" type="checkbox"> X</br>
	<input name="x" class="caixa" type="checkbox"> X</br>
	<!-- grupo x-->
	<input name="y" class="caixa" type="checkbox"> Y</br>
	<input name="y" class="caixa" type="checkbox"> Y</br>
	<!-- grupo z-->
	<input name="z" class="caixa" type="checkbox"> Z</br>
	<input name="z" class="caixa" type="checkbox"> Z</br>
</div>
<div id="status"></div>
<button id="ok">Ok</button>

6
  • Explique isso melhor meu jovem, coloque exemplos para que fique mais claro. O que vc chama de status?
    – Sam
    Commented 5/08/2018 às 16:51
  • Tipo, se dois input's de 'name' iguais (Ex: x & x) estejam selecionados o botão ok fica visível, caso seja de 'name' diferentes (Ex: x & y) selecionados o botão fica escondido ou bloqueado.
    – user94502
    Commented 5/08/2018 às 16:55
  • Vc usa jQuery ou não?
    – Sam
    Commented 5/08/2018 às 16:58
  • Está disponível a biblioteca no meu pequeno projeto
    – user94502
    Commented 5/08/2018 às 17:04
  • Se selecionar só um, é para mostrar o botão ou tem que selecionar o par?
    – Sam
    Commented 5/08/2018 às 17:13

2 Respostas 2

0

Creio que seja isso que deseja (todas as explicações no código). Só é preciso esconder o botão inicialmente pelo CSS com display: none;.

// seleciona todos os checkbox
var caixas = document.querySelectorAll("#lista .caixa");

// cria uma array com os names dos checkbox
var nomes = [];

// adiciona os names na array, sem repeti-los
for(var x=0; x<caixas.length; x++){
   if(!~nomes.indexOf(caixas[x].name)) nomes.push(caixas[x].name);
}

// loop para criar o evento "change" em cada checkbox
for(var x=0; x<caixas.length; x++){
   caixas[x].onchange = function(){
      
      // a variável "res" é o retorno fa função "checa()"
      var res = checa();
      
      if(res){
         
         // se "res" for "true" (retornou algum valor da função "checa()")
         // insiro o texto com o retorno da função e mostro o botão
         document.getElementById("status").innerHTML = "Grupo checado: " + res;
         document.getElementById("ok").style.display = "inline-block";
      }else{
         
         // se "res" for "false" (retornou "false" da função)
         // esvazio a div #status e escondo o botão
         document.getElementById("status").innerHTML = "";
         document.getElementById("ok").style.display = "none";
      }
   }
}

function checa(){

   // flag para verificação do name do checkbox que chamou a função
   // começa com "false"
   var chk = false;

   // percorro a array "nomes" para verificar se há mais de um name checado
   for(var x=0; x<nomes.length; x++){
      
      // conto quantos estão checados de cada "name" da array
      var checados = document.querySelectorAll("#lista .caixa[name='"+nomes[x]+"']:checked").length;
      
      // algum foi checado
      if(checados){
         
         // se o "chk" for verdadeiro (tem valor e não é false)
         // e se ele é diferente do valor atual da array
         if(chk && chk != nomes[x]){
            
            // se for verdadeiro (possui valor) e
            // for diferente do valor da array,
            // volta a ser "false"
            chk = false;
            
            // paro o loop for
            break;
         }else{
            
            // atribuo o valor da array ao "chk"
            chk = nomes[x];
         }
      }
   }

   // se "chk" for "false" retorno falso;
   if(!chk) return false;

   // se "chk" tiver valor e não for "false"
   // retorno ele, que é o "name" do checkbox checado
   return chk;
}
#ok{
   display: none;
}
<div id="lista">
	<!-- grupo x-->
	<input name="x" class="caixa" type="checkbox"> X</br>
	<input name="x" class="caixa" type="checkbox"> X</br>
	<input name="x" class="caixa" type="checkbox"> X</br>
	<!-- grupo x-->
	<input name="y" class="caixa" type="checkbox"> Y</br>
	<input name="y" class="caixa" type="checkbox"> Y</br>
	<!-- grupo z-->
	<input name="z" class="caixa" type="checkbox"> Z</br>
	<input name="z" class="caixa" type="checkbox"> Z</br>
	<input name="z" class="caixa" type="checkbox"> Z</br>
</div>
<div id="status"></div>
<button id="ok">Ok</button>

6
  • tem um problema, eu esqueci de especificar, a quantidade de input's pode variar, mas acho que já sei +- onde tenho de mexer.
    – user94502
    Commented 5/08/2018 às 18:50
  • Veja aí, se não conseguir me fala que eu mexo no código.
    – Sam
    Commented 5/08/2018 às 19:01
  • estou tendo problema nesta parte c_len%2 == 0
    – user94502
    Commented 5/08/2018 às 19:09
  • Vou mexer então... é porque só funciona se forem pares
    – Sam
    Commented 5/08/2018 às 19:10
  • Ok, tem que ser no minimo 1 ou mais
    – user94502
    Commented 5/08/2018 às 19:14
0

Tente isso:

<div id="lista">
    <!-- grupo x-->
    <input name="x" class="caixa" type="checkbox"> X</br>
    <input name="x" class="caixa" type="checkbox"> X</br>
    <!-- grupo x-->
    <input name="y" class="caixa" type="checkbox"> Y</br>
    <input name="y" class="caixa" type="checkbox"> Y</br>
    <!-- grupo z-->
    <input name="z" class="caixa" type="checkbox"> Z</br>
    <input name="z" class="caixa" type="checkbox"> Z</br>
</div>
<div id="status"></div>
<button id="ok" disabled>Ok</button>

<script type="text/javascript">
    let botao = document.querySelector('#ok');
    let status = document.querySelector('#status');
    let filtraSelecionados = [];

    let lista = document.querySelector('#lista');
    lista.addEventListener('click', function(){
        atualizaStatus();
    });

    botao.addEventListener('click', function(){
        alert(filtraSelecionados);
    });

    function atualizaStatus(){
        let caixas = document.querySelectorAll('.caixa');
        let selecionados = [];

        caixas.forEach(function(caixa){
            if(caixa.checked) selecionados.push(caixa.name);
        });

        if(selecionados.length % 2 != 0){
            botao.disabled = true;
            status.textContent = '';
            return;
        };

        filtraSelecionados = selecionados.filter((value, index, s) => s.indexOf(value) === index);

        if(selecionados.length/filtraSelecionados.length == 2){
            botao.disabled = false;
            status.textContent = filtraSelecionados;
        }
    }

</script>

Você deve fazer log-in para responder a esta pergunta.