4

Preciso que apenas no select option que for selecionado a opção "Líder", ele não atribua o "disabled", apenas nos demais selects filhas.

A lógica é que apenas um usuário pode ser líder, mas quando seleciono algum líder, esse option fica como "disabled", e na hora de enviar os dados ele não consegue enviar o value justamente porque o option está desabilitado.

Aqui está uma simulação do problema:

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

function disableThis(sel) {
    var temSelecionado = false;

    $("option[value='1']").each(function() {
        if (this.selected) {
            temSelecionado = true;

            $(this).parent().each(function() {
                $(this.options).each(function() {
                    if ($(this).val() != "1") {
                        $(this).prop("disabled", true);
                    }
                })
            });
        }
    });

    $(sel).children().each(function() {
        var thisLider = false;
        // verifica se o lider estar selecionado
        if ($(this).val() == "1" && $(this).prop("selected")) {
            thisLider = true;
        }
        // caso nao estiver, desabilita
        if ($(this).val() != "1" && thisLider) {
            $(this).prop("disabled", true);
        }
    });
    //faz uma verificacao nos demais selects e se o lider estiver selecionado, desabilitara
    $("select").children().each(function() {
        if ($(this).val() == "1" && temSelecionado) {
            $(this).prop("disabled", true);
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

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

2 Respostas 2

3

Em vez de disabled ou readonly, oculte a option.

var unique = 1;

$('select.player').on('change', function(){
    var options = $('.player').find('option').filter(function(){
        return unique == this.value;
    });
    if(unique == this.value){
        options.hide();
        $(this).find('option[value="'+unique+'"]').show();
    }else{
        if($(this).find('option[value="'+unique+'"]:visible').size() > 0){
            options.show();
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="player1" class="player">
    <option value=""></option>
    <option value="1">Lider</option>
    <option value="2">Tenente</option>
    <option value="3">Cabo</option>
    <option value="4">Espectador</option>
</select>

<select name="player2" class="player">
    <option value=""></option>
    <option value="1">Lider</option>
    <option value="2">Tenente</option>
    <option value="3">Cabo</option>
    <option value="4">Espectador</option>
</select>

<select name="player3" class="player">
    <option value=""></option>
    <option value="1">Lider</option>
    <option value="2">Tenente</option>
    <option value="3">Cabo</option>
    <option value="4">Espectador</option>
</select>

3
  • Guilherme, fico muito grato pela ajuda. Me ajudou a resolver uma boa parte do meu problema. O que falta agora é "resetar o select" ao deselecionar o option que faz a ocultação nos outros selects. Porque se caso o usuário errar ao selecionar a opção que ele quer e quiser voltar atrás (deselecionando), os options não ficam visíveis nos outros selects.. aqui está um exemplo do meu problema: jsfiddle.net/andrealbson/o1xs3m8x Commented 24/11/2016 às 3:31
  • @AndréAlbson Esse é problema de usar bootstrap, note que ele na verdade não trabalha com o select, e sim com uma div que "parece" um select. Assim é necessário criar um logica em cima de elementos que não existem e foram criados por ele. Commented 24/11/2016 às 12:23
  • É verdade, vou buscar uma outra solução. Mesmo assim obrigado! Commented 24/11/2016 às 17:20
3

Disabled realmente não envia os dados para o request. Use 'readonly'.

Para desabilitar de selecionar outras opções, é necessário tornar o readonly para o select (usando parent()).

Exêmplo: https://jsfiddle.net/v6xdauxg/

    ...

 $(this).parent().each(function() {
                $(this.options).each(function() {
                    if ($(this).val() != "1") {
                        $(this).parent().prop("readonly", true);
                    }
                })
            });

    ...

Encontrei um tópico similar no stack overflow em inglês: https://stackoverflow.com/questions/7357256/disabled-form-inputs-do-not-appear-in-the-request

2
  • Entendi @Franco, mas o problema é que no select em que o for selecionado a opção "Líder", os demais option desse mesmo select precisam ser desabilitados, pois o usuário que for selecionado como "Líder" não deve ter mais funções, ele só deverá ser líder... entendes? Commented 23/11/2016 às 11:07
  • @AndréAlbson Fiz uma edição. Acredito que agora seja mais próximo do que você deseja.
    – Franco Pan
    Commented 23/11/2016 às 13:34

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 .