How to remove "disabled" attribute from the parent select option?

Question

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

The logic is that only a user can be a leader, but when I select a leader, this option is "disabled", and when sending the data he 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" 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>

Answer 1

Disabled doesn’t really send the data to the request. Use 'readonly'.

To disable from selecting other options, it is necessary to make readonly to select (using parent()).

Example: https://jsfiddle.net/v6xdauxg/

    ...

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

    ...

I found a similar topic in stack overflow in English: https://stackoverflow.com/questions/7357256/disabled-form-inputs-do-not-appear-in-the-request

Answer 2

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>