0
I have a list of users and each of them will have one or more functions (example: Leader, For Knowledge, Participant).
If I choose the "Leader" option, the other options (from the same select) should be disabled (because only one user can be "Leader") and also, in the other selects, the "Leader" option needs to be disabled as well, because ONLY ONE USER CAN BE "LEADER".
Below is a simulation of my problem: Example
2
I made some changes to the sample code and based on the response from André Albson
I basically created a function to disable the primary dropdown elements, I removed the duplicate Ids.
$('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>
<script src="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>
<link href="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>Excellent help Marco Vinicius! I just need a detail to get to 100%. The user who is not a leader, he may have more than one function, that is, in this example he may be a "participant" and also a "for knowledge". Select will only not allow you to select "Leader" if another select has already been selected as such (in the same way you have). How do I fix this detail? Thanks so much for your help!
I made a change I believe that now is doing exactly what you need got a little confused the code but I did not have time to refactor
Excellent Marco Vinicius. The result is just that. Thank you very much man!
Browser other questions tagged jquery html html-select
You are not signed in. Login or sign up in order to post.
Is this what you’re looking for? https://jsfiddle.net/yszbzxzy/
– Sergio
Almost that much, Sergio. However, in the select where I select the lead option, all options of the same select must be disabled (because the user who is selected as "Leader" cannot have other functions). And in the other selects the option "Leader" should be disabled tbm. The example you posted is almost that, but the only option that should be disabled is that of "Leader".
– André Albson