1

tenho esse código que um botão marca e desmarca uma checkbox http://jsfiddle.net/H544C/1/

mais em vez do botão no meu caso seria um combobox que marca/desmarca checkbox

alguém poderia me ajudar? sou leiga no js..

fiz esse código porém ele marca a opção e não desmarca quando faço a troca no 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);
				});

13
  • Você quer que ao marcar uma opção no campo select e clicar no botão, a opção marcada nao fique mais selecionada? Poderia explicar melhor o que precisas? Não ficou claro.
    – Jorge.M
    25/10/2018 às 19:28
  • tenho um select com 5 perfils ao selecionar o select gostaria que marcasse o checkbox relacionado aquele perfil e quando mudasse perfil saisse o que estava marcado e selecionasse só a permissão daquele perfil
    – Joyce SD
    25/10/2018 às 19:32
  • os perfils são permissoes ex: perfil atendimento só pode ver duas coisas, perfil diretoria pode ver tudo .. hoje é manualmente clico um por um para dar a permissão mais agora com perfil facilitaria pois automaticamente ele iria marcar o que cada perfil tem acesso
    – Joyce SD
    25/10/2018 às 19:33
  • seria igual esse exemplo exatamente assim jsfiddle.net/H544C/1 só que inves de usar botão seria select
    – Joyce SD
    25/10/2018 às 19:33
  • onde está click (botão) seria o combo de select com os perfis e a idéia é a mesma de marcar/desmarcar
    – Joyce SD
    25/10/2018 às 19:34

1 Resposta 1

1

Criei um exemplo funcional para isso.

Algumas considerações são necessárias:

1- No seu campo select, adicionei uma opção sem valor para conseguir identificar o evento de change, se não tivesse colocado, o primeiro elemento selecionado não acionaria o evento a não ser que fosse trocada a opção.

2- Criei um objeto chamado p, nesse objeto você colocara todas as suas permissões seguindo o padrão descrito.

3- No final do script criei uma função chamada setPermission, a mesma receberá um array como parâmetro que conterá todas as suas permissões que você irá definir nos cases do switch.

4- No switch será definido todas as permissões que o usuário terá. Essas opções foram definidas no objeto p no item 2. Vale lembrar que essas opções devem ser passadas dentro de um array para a função conseguir correr todos os itens selecionados.

Abaixo contém o exemplo:

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

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .