Lock button if input's of different names selected

Question

Lock button if input's of different names selected

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I need help to make a small script that blocks the button, if it has input's with the nomes different selected, and that allows if they are equal, both cases with the same class, and also that shows the status which groups are selected.

<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>

javascript

asked by anonymous 05.08.2018 / 18:39

2 answers

1

Try this:

<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>

05.08.2018 / 20:41

How do I define a unit of measure in the value of the variable Problem in game startup

score 1 · Accepted Answer

I think that's what you want (all the explanations in the code). You only have to hide the button initially by the CSS with 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>