Combox check / uncheck checkbox

Question

Combox check / uncheck checkbox

Navigation

#1 by (1 votes)

1

I have this code that a button marks and unchecks a checkbox link

Instead of the button in my case it would be a combobox that marks / unchecks checkbox

Could anyone help me? I'm a layman at js ..

I made this code however it marks the option and does not uncheck when I make the change in combobox

<div class="form-group col-xs-8 col-sm-2" th:classappend="${#fields.hasErrors('perfil')} ? has-error">
                        <label for="perfil" class="control-label">Perfil</label> <select class="form-control" th:field="*{perfil}">
                            <option data-atendimento="ATENDIMENTO" value="ATENDIMENTO">Atendimento</option>
                            <option data-diretor="DIRETOR" value="DIRETOR">Diretor</option>
                            <option data-estoque="ESTOQUE" value="ESTOQUE">Estoque</option>
                            <option data-gerente="GERENTE" value="GERENTE">Gerente</option>
                            <option data-ti="TI" value="TI">T.I</option>
                            <option data-vendedor="VENDEDOR" value="VENDEDOR">Vendedor</option>
                        </select>
                    </div>

var select = document.querySelector('select');
		select.addEventListener('change', function() {
			var selecionada = this.options[this.selectedIndex];
			var atendimento = selecionada.getAttribute('data-atendimento');
			if (atendimento) {
				$('#permissoes3').each(function() {
					if (this.checked)
						$(this).attr("checked", false);
					else
						$(this).prop("checked", true);
				});

				$('#permissoes4').each(function() {
					if (this.checked)
						$(this).attr("checked", false);
					else
						$(this).prop("checked", true);
				});

				$('#permissoes6').each(function() {
					if (this.checked)
						$(this).attr("checked", false);
					else
						$(this).prop("checked", true);
				});


var select = document.querySelector('select');
		select.addEventListener('change', function() {
			var selecionada = this.options[this.selectedIndex];
			var diretor = selecionada.getAttribute('data-diretor');
			if (diretor) {
				$('#permissoes1').each(function() {
					if (this.checked)
						$(this).attr("checked", false);
					else
						$(this).prop("checked", true);
				});

				$('#permissoes3').each(function() {
					if (this.checked)
						$(this).attr("checked", false);
					else
						$(this).prop("checked", true);
				});

				$('#permissoes6').each(function() {
					if (this.checked)
						$(this).attr("checked", false);
					else
						$(this).prop("checked", true);
				});

javascript html

asked by anonymous 25.10.2018 / 21:04

1 answer

How to pass a parameter along with the Model to a PartialVIew when rendering it How to access the custom attributes of a property using VB.NET

score 1 · Answer 1

I've created a working example for this.

Some considerations are needed:

1- In your select field, I added an option with no value to be able to identify the event of change , if it had not, the first selected element would not trigger the event unless the option was changed

2 - I created an object called p , in this object you will put all your permissions following the described pattern.

3- At the end of script I created a function called setPermission , it will receive an array as a parameter that will contain all its permissions that you will set in cases of switch .

4- In% w /% will be set all the permissions that the user will have. These options have been defined in object switch in item 2. It is worth remembering that these options must be passed within a p for the function to be able to run all selected items.

Below is an example:

//objeto com todas as opções de permissão
let p = {
    'a': 'permissaoA',
    'b': 'permissaoB',
    'c': 'permissaoC',
    'd': 'permissaoD',
    'e': 'permissaoE',
    'f': 'permissaoF',
    'g': 'permissaoG',
}
$('#perfil').on('change',function(){
   let perfil = ('option:selected', this).value;      
   switch(perfil) {
       case 'ATENDIMENTO': 
           setPermission([p.a, p.b]);
           break;
       case 'DIRETOR':
           setPermission([p.a, p.b, p.c, p.d, p.e, p.f, p.g]);
           break; 
       case 'ESTOQUE':
           setPermission([p.a, p.b, p.c, p.d]);
           break;  
       case 'GERENTE':
           setPermission([p.a, p.b, p.c, p.d, p.e, p.f]);
           break;   
       case 'TI':
           setPermission([p.a]);
           break;  
       case 'VENDEDOR':
           setPermission([p.b]);
           break;   
           
       default: 
           alert('Indique uma opção');
   }  
   
});


/*Função responsável por setar as permissões. Receberá um array com todos os itens que devem ser marcados*/
function setPermission(permissoes = []) {
    //zera os checkboxs marcados
    $('input[type="checkbox"]').prop('checked', false); 
    
    //loop para adicionar as permissões indicadas no array
    for(let i = 0; i < permissoes.length; i++) {
        $('#'+permissoes[i]).prop('checked', true);       
    }
 }

<div class="form-group col-xs-8 col-sm-2" th:classappend="${#fields.hasErrors('perfil')} ? has-error">
                        <label for="perfil" class="control-label">Perfil</label> <select id="perfil" class="form-control" th:field="*{perfil}">
                        <option selected>Selecione uma opção* </option>
                            <option data-atendimento="ATENDIMENTO" value="ATENDIMENTO">Atendimento</option>
                            <option data-diretor="DIRETOR" value="DIRETOR">Diretor</option>
                            <option data-estoque="ESTOQUE" value="ESTOQUE">Estoque</option>
                            <option data-gerente="GERENTE" value="GERENTE">Gerente</option>
                            <option data-ti="TI" value="TI">T.I</option>
                            <option data-vendedor="VENDEDOR" value="VENDEDOR">Vendedor</option>
                        </select>
                    </div>  <br>

<input type='checkbox' id="permissaoA" class='marcar' name='check[]' />
<input type='checkbox' id="permissaoB" class='marcar' name='check[]' />
<input type='checkbox' id="permissaoC" class='marcar' name='check[]' />
<input type='checkbox' id="permissaoD" class='marcar' name='check[]' />
<input type='checkbox' id="permissaoE" class='marcar' name='check[]' />
<input type='checkbox' id="permissaoF" class='marcar' name='check[]' />
<input type='checkbox' id="permissaoG" class='marcar' name='check[]' />
                    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>