1

Tenho o seguinte código:

<div class="form-group">
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Usuarios"> Usuários:</label>
</div>
<div class="checkbox">
    <label>
    <input type="checkbox" name="Usuarios" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Consultar"> Consultar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Autorizar"> Autorizar
    </label>
</div>

<hr>

<div class="form-group" >
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Segmento"> Segmento:</label>
</div>
<div class="checkbox">
    <label>
    <input type="checkbox" name="Segmento" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Consultar"> Consultar
    </label>
</div>

<hr>

<div class="form-group" >
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Setor"> Setor:</label>
</div>
<div class="checkbox">
    <label>
    <input type="checkbox" name="Setor" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Consultar"> Consultar
    </label>
</div>

E com isso tenho o seguinte resultado:

inserir a descrição da imagem aqui

O objetivo é ao marcar um checkbox, ele marcar todos, porém gostaria que os checkboxs ficassem desabilitados e só fossem desabilitados ao clicar em um checkbox (Usuários, Segmentos, Setor).

O código jquery é esse:

 <script type="text/javascript">
  function marcarTodos(radio) {
    const itens = document.querySelectorAll(`[name$=${radio.value}]`);
    for(item of itens) {
        item.checked = radio.checked;              
    }
  }
  </script>

Vi que tem esse código, mas não soube aplicar dentro da minha solução.

1
  • Não ficou muito claro o seu objetivo (a frase ficou confusa), você poderia esclarecer melhor? Mais especificamente a frase: "gostaria que os checkboxs ficassem desabilitados e só fossem desabilitados ao clicar em um checkbox". Não dá pra saber se você quer que os checkboxes "pais" ativem/desativem os grupos de "filhos", ou se eles marcam/desmarcam todos os "filhos". Commented 28/05/2020 às 21:30

2 Respostas 2

1

Você consegue fazer isso utilizando a propriedade disabled do elemento HTML:

function getRadiosByName(name) {
  return document.querySelectorAll(`[name$=${name}]`);
}

function marcarTodos(radio) {
  const itens = getRadiosByName(radio.value);

  for(item of itens) {
      item.checked = radio.checked;
      item.disabled = !radio.checked;
  }
}

function disable(name) {
  const itens = getRadiosByName(name);

  for(item of itens) {
      item.disabled = true;
  }
}

function disableAll() {
  disable("Usuarios");
  disable("Segmento");
  disable("Setor");
}

disableAll();
<div class="form-group">
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Usuarios"> Usuários:</label>
</div>

<div class="checkbox">
    <label>
    <input type="checkbox" name="Usuarios" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Consultar"> Consultar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Autorizar"> Autorizar
    </label>
</div>

<hr>

<div class="form-group" >
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Segmento"> Segmento:</label>
</div>

<div class="checkbox">
    <label>
    <input type="checkbox" name="Segmento" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Consultar"> Consultar
    </label>
</div>

<hr>

<div class="form-group" >
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Setor"> Setor:</label>
</div>

<div class="checkbox">
    <label>
    <input type="checkbox" name="Setor" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Consultar"> Consultar
    </label>
</div>


Aqui uma outra forma, buscando todos os checkbox de uma vez para desabilitar assim que a página for carregada:

function marcarTodos(radio) {
  const itens = document.querySelectorAll(`[name$=${radio.value}]`);

  for(item of itens) {
      item.checked = radio.checked;
      item.disabled = !radio.checked;
  }
}

function disableAll() {
  const itens = document.querySelectorAll(`div.checkbox input[type=checkbox]`);

  for(item of itens) {
      item.disabled = true;
  }
}

disableAll();
<div class="form-group">
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Usuarios"> Usuários:</label>
</div>

<div class="checkbox">
    <label>
    <input type="checkbox" name="Usuarios" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Consultar"> Consultar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Autorizar"> Autorizar
    </label>
</div>

<hr>

<div class="form-group" >
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Segmento"> Segmento:</label>
</div>

<div class="checkbox">
    <label>
    <input type="checkbox" name="Segmento" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Consultar"> Consultar
    </label>
</div>

<hr>

<div class="form-group" >
    <label><input type="checkbox" onclick="marcarTodos(this)" name="Tipo" value="Setor"> Setor:</label>
</div>

<div class="checkbox">
    <label>
    <input type="checkbox" name="Setor" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Consultar"> Consultar
    </label>
</div>


Documentação: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled

6
  • 1
    Olá Daniel. Perdão, acho que não fui muito claro na minha dúvida. Gostaria que os campos ficassem desabilitados até clicar no checkout principal (Usuários, Segmentos, Setor) e caso o usuário desmarque o checkout principal, os campos relacionados voltassem a ficar desabilitados.
    – user24136
    Commented 28/05/2020 às 21:29
  • Tranquilo, isso acontece :) Então ele clica no principal, todos ficam marcados mas com a possibilidade de desmarcar, caso o principal seja desmarcado, desabilitamos e desmarcamos todos? Commented 28/05/2020 às 21:38
  • Isso mesmo. Assim o usuário não marca um subitem sem clicar no checkbox principal.
    – user24136
    Commented 28/05/2020 às 21:43
  • Ok, vê se esse exemplo lhe atende... Claro, tem várias formas de fazer isso, mas talvez já lhe dê um norte legal de como seguir essa implementação. Commented 28/05/2020 às 21:50
  • 1
    @Fox.11 Fiz as alterações pra fazer dessa forma que você citou, deixei dois exemplos, é isso mesmo? Commented 29/05/2020 às 0:02
0

Uma maneira bem simples de ativar/desativar vários elementos ao mesmo tempo é usar o atributo disabled do fieldset, pois elas desativam todos os inputs filhos.

Aí fica muito mais simples ativar e desativar os checkboxes filhos. Podemos usar um atributo data-target para configurar no próprio HTML qual vai ser o fieldset que o checkbox vai ativar/desativar.

O HTML ficam simples, por exemplo:

<input type="checkbox" class="checkgroup-toggle" data-target="#checkgroup-usuarios">

<fieldset id="checkgroup-usuarios">
    <input type="checkbox" name="Usuarios" value="Incluir"> Incluir
    <input type="checkbox" name="Usuarios" value="Alterar"> Alterar
</fieldset>

Veja seu exemplo adaptado:

$(".checkgroup-toggle").on("change", function() {
    // Faz cache do elemento target para pesquisar apenas uma vez e usar o cache na vezes seguintes
    this.groupContainer = this.groupContainer || $(this.dataset.target);
    
    // Desativa o fieldset de acordo com a propriedade 'checked'
    this.groupContainer.prop('disabled', !this.checked);
}).trigger('change');  // Executo 1x para atualizar o estado quando a página é carregada
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<div class="form-group">
    <label>
        <input type="checkbox" name="Tipo" value="Usuarios"  data-target="#checkgroup-usuarios" class="checkgroup-toggle">
        Usuários:
    </label>
</div>

<fieldset class="checkbox" id="checkgroup-usuarios">
    <label>
    <input type="checkbox" name="Usuarios" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Consultar"> Consultar
    </label>
    <label>
    <input type="checkbox" name="Usuarios" value="Autorizar"> Autorizar
    </label>
</fieldset>

<hr>

<div class="form-group" >
    <label>
        <input type="checkbox" name="Tipo" value="Segmento" data-target="#checkgroup-segmento" class="checkgroup-toggle">
        Segmento:
    </label>
</div>

<fieldset class="checkbox" id="checkgroup-segmento">
    <label>
    <input type="checkbox" name="Segmento" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Segmento" value="Consultar"> Consultar
    </label>
</div>

<hr>

<div class="form-group" >
    <label>
        <input type="checkbox" name="Tipo" value="Setor" data-target="#checkgroup-setor" class="checkgroup-toggle">
        Setor:
    </label>
</div>

<fieldset class="checkbox" id="checkgroup-setor">
    <label>
    <input type="checkbox" name="Setor" value="Incluir"> Incluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Alterar"> Alterar
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Excluir"> Excluir
    </label>
    <label>
    <input type="checkbox" name="Setor" value="Consultar"> Consultar
    </label>
</fieldset>

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