0

Tenho uma lista de usuários e cada um deles irão possuir uma ou mais funções (exemplo: Líder, Para Conhecimento, Participante).

Se caso eu escolha a opção "Lider", as demais opções (desse mesmo select) deverão ser desabilitadas (pois apenas um usuário pode ser "Líder") e também, nos demais selects, a opção "Líder" precisa ser desabilitada também, pois APENAS UM USUÁRIO PODE SER "LÍDER".

Abaixo está uma simulação do meu problema: Exemplo

2
  • 1
    É isto que procuras? jsfiddle.net/yszbzxzy
    – Sergio
    20/11/2016 às 21:18
  • Quase isso, Sergio. Porém, no select onde eu selecionar a opção líder, todas as options desse mesmo select deverá ser desabilitados (pois o usuário que for selecionado como "Líder" não poderá ter outras funções). E nos demais selects a opção "Líder" deve ser desativado tbm. O exemplo que você postou é quase isso, só que a única opção que deve ser desabilitada é a do "Líder". 21/11/2016 às 4:42

1 Resposta 1

2

Fiz umas alterações no código exemplo e com base na resposta do André Albson

Basicamente criei uma função para desabilitar os elementos da dropdown primária, Removi os ID's duplicados.

$('select').change(function(){
  var sel = $(this);        
  disableThis(sel);       
  $('.selectpicker').selectpicker('refresh');
});

function disableThis(sel){
  var val = sel.val();
  var temSelecionado = false;
  $("option[value='lider']").each(function(){
    if(this.selected){
      temSelecionado = true;      
      $(this).parent().each(function(){
        $(this.options).each(function(){        
          if($(this).val() != "lider")
          {
            $(this).prop("selected", false);
                $(this).prop("disabled",true);
          }
        }
        )        
      })
     }
  });
   $(sel).children().each(function(){
     var thisLider = false;
     if($(this).val() == "lider" && $(this).prop("selected"))
       thisLider = true;
  	if($(this).val() != "lider" && thisLider)
      $(this).prop("disabled",true);
  });
  
  $("select").children().each(function(){
    if($(this).val() == "lider" && temSelecionado){
      $(this).prop("disabled",true);      
    } 
  })
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <select class="selectpicker" id="funcao" multiple>
      <option value="lider">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
    <br><br>
    <select class="selectpicker" multiple>
      <option value="lider">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
    <br><br>
    <select class="selectpicker" multiple>
      <option value="lider">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
    <br><br>
    <select class="selectpicker" multiple>
      <option value="lider">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>

3
  • Excelente ajuda Marco Vinicius! Eu só preciso de um detalhe para chegar ao 100%. O usuário que não for líder, ele pode ter mais de uma função, ou seja, nesse exemplo ele pode ser um "participante" e também um "para conhecimento". O select só não permitirá selecionar "Lider" caso algum outro select já tenha sido selecionado como tal (dessa mesma forma que você colocou). Como eu faço para corrigir esse detalhe? Desde já muito obrigado pela ajuda! 21/11/2016 às 12:24
  • Fiz uma alteração acredito que agora está fazendo exatamente o que você necessita ficou meio confuso o código mas não tive tempo de refatorar 21/11/2016 às 13:05
  • Excelente Marco Vinicius. O resultado é isso mesmo. Muito obrigado cara! 21/11/2016 às 13:11

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 .