When selecting a checkbox, disable other checkboxes

Asked

Viewed 230 times

1

I have the following code:

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

And with that I have the following result:

inserir a descrição da imagem aqui

The goal is to mark a checkbox, it marks all, but I would like the checkboxes to be disabled and only disabled when clicking a checkbox (Users, Segments, Industry).

The jquery code is this:

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

I saw that you have that code, but did not know how to apply within my solution.

jquery

  • It was not very clear what your goal was (the sentence got confused), could you clarify it better? More specifically the phrase: "would like checkboxs to be disabled and only disabled by clicking on a checkbox". There is no way to know if you want "parent" checkboxes to activate/deactivate the "kids" groups, or if they mark/unmark all "kids".

2 answers

1


You can do this using the property disabled of the HTML element:

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>

Here another way, seeking all the checkbox at once to disable as soon as the page is loaded:

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>

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled

  • 1

    Hello Daniel. I’m sorry, I don’t think I was very clear in my doubt. I would like the fields to be disabled until I click on the main checkout (Users, Segments, Sector) and if the user unchecks the main checkout, the related fields will be disabled again.

  • Relax, this happens :) Then he clicks on the main one, all are marked but with the possibility to uncheck, if the main one is unchecked, we disable and uncheck all?

  • That’s right. So the user doesn’t mark a upload without clicking the main checkbox.

  • Okay, see if this example suits you... Sure, there are several ways to do this, but maybe it already gives you a cool north of how to follow this implementation.

  • 1

    @Fox.11 I made the changes to do this way that you quoted, I left two examples, that’s right?

  • Perfect Daniel. It worked! Thank you very much!

Show 1 more comment

0

A very simple way to enable/disable multiple elements at the same time is to use the attribute disabled of fieldset, because they disable all child inputs.

Then it becomes much simpler to activate and deactivate checkboxes children. We can use an attribute data-target to configure in HTML itself what will be the fieldset that the checkbox will enable/disable.

HTML is simple, for example:

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

See your adapted example:

$(".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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.