javascript – How to remove "disabled" attribute from parent select option?

Question:

I need that only in the select option that the "Leader" option is selected, it does not assign the "disabled", only in the other selects daughters.

The logic is that only one user can be a leader, but when I select a leader, this option is "disabled", and when sending the data it cannot send the value precisely because the option is disabled.

Here is a simulation of the problem:

$('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"/>

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

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

Answer:

Instead of disabled or readonly , hide the 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>
Post Views: 3
Scroll to Top