How to disable option according to option selected?

Question

How to disable option according to option selected?

Navigation

#1 by (2 votes)

0

I have a list of users and each of them will have one or more functions (example: Leader, To Knowledge, Participant).

In case I choose the option "Leader", the other options (of that same select) should be disabled (since only one user can be "Leader") and also, in the other selects, the "Leader" option needs to be disabled also, since ONLY ONE USER CAN BE "LEADER".

Below is a simulation of my problem: Example

html jquery html-select

asked by anonymous 20.11.2016 / 22:05

1 answer

Automatically log in to hybrid applications? Is it possible for a Closure (Swift) to capture reference of the instance of the object that executes it?

score 2 · Accepted Answer

I made some changes to the sample code and based on the André Albson response

Basically I created a function to disable the elements of the primary dropdown, I removed the duplicate ID's.

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