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

Question

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

Navigation

#1 by (3 votes)
#2 by (2 votes)

4

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

The logic is that only one user can be a leader, but when selecting a leader, this option is disabled, and at the time of sending the data it can not send the value just because the option is disabled. p>

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><scriptsrc="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><linkhref="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>

javascript html jquery html-select

asked by anonymous 23.11.2016 / 10:44

2 answers

Foreign Key does not respect referential integrity View the contents of object NodeList

score 3 · Answer 1

Instead of disabled or readonly , hide 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><selectname="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>

score 2 · Answer 2

Disabled does not actually send the data to the request. Use 'readonly'.

To disable selecting other options, you need to make readonly for select (using parent() ).

Example: link

    ...

 $(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: link