Block button if input’s of different names selected

Question

I need help to make a small script that blocks the button, if you have input's with the nomes different selected, and allowing if they are equal, both cases with the same class, and also showing the status of 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>

Answer 1

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

Answer 2

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>