Combox check/clear checkbox

Asked

Viewed 103 times

1

I have this code that a button marks and unchecks a checkbox http://jsfiddle.net/H544C/1/

more instead of the button in my case would be a combobox that marks/unchecks checkbox

Could someone help me? I’m a layman at js..

I made this code but it marks the option and does not uncheck when I trade 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

  • You want to mark an option in the field select and click the button, the checked option is no longer selected? Could you explain better what you need? It was not clear.

  • I have a select with 5 profiles when selecting select I would like you to mark the checkbox related to that profile and when I changed profile I left what was marked and selected only the permission of that profile

  • perfils are permissions ex: service profile can only see two things, management profile can see everything .. today is manually click one by one to give permission more now with profile would facilitate as automatically it would mark what each profile has access

  • would look exactly like this example http://jsfiddle.net/H544C/1/ only instead of using button would select

  • where this click (button) would be the combo of select with the profiles and the idea is the same of mark/deselect

  • Now it’s clearer. Post the fields that will be marked automatically for me to create an example.

  • Jorge, the fields come from the database I can put an image because it would facilitate you...

  • It is necessary to know how the data comes. It comes with some class related to select options?

  • each data comes with an id has 24 permissions so permissionA comes id=permissionA , permissionB comes id=permissionsb

  • Right, now the next step: How do I know which permissions each select profile has?

  • just make the select mark/uncheck will help me too because I will "fail" the ids as the director permissions have all so will receive the 24 the attendant only has 5 so it will be only a,b,c,d,e

  • Okay, I’ll create an answer.

  • thank you Jorge.

Show 8 more comments

1 answer

1

I created a functional example for this.

Some considerations are needed:

1- In your field select, added a worthless option to be able to identify the event of change, if it had not been set, the first element selected would not trigger the event unless the option was changed.

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

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

4- No switch all permissions the user will have will be set. These options have been set in the object p in item 2. Note that these options must be passed within a array for the function to be able to run all selected items.

Below contains the 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>

Browser other questions tagged javascript html

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