Как отключить <option> согласно <option selected>?

Question

У меня есть список пользователей, и у каждой из них есть роль.

Пользователь, выбранный как «Líder», не может иметь более одной роли, только «Líder».

Если пользователь выбирает другой вариант (дочери), опция «Líder» должна быть отключена. Пользователи, не являющиеся «Líder», могут иметь более одной роли.

Вот моделирование задачи: jsfiddle

HTML:

<select class="selectpicker" id="funcao" multiple data-max-options="1"> 
    <option value="lider">Líder</option> 
    <option value="conhecimento">Para Conhecimentor</option> 
    <option value="participante">Participante</option> 
</select> 
<br><br> 
<select class="selectpicker" id="funcao" multiple data-max-options="1"> 
    <option value="lider">Líder</option> 
    <option value="conhecimento">Para Conhecimentor</option> 
    <option value="participante">Participante</option> 
</select> 
<br><br> 
<select class="selectpicker" id="funcao" multiple data-max-options="1"> 
    <option value="lider">Líder</option> 
    <option value="conhecimento">Para Conhecimentor</option> 
    <option value="participante">Participante</option> 
</select> 
<br><br> 
<select class="selectpicker" id="funcao" multiple data-max-options="1"> 
    <option value="lider">Líder</option> 
    <option value="conhecimento">Para Conhecimentor</option> 
    <option value="participante">Participante</option> 
</select> 

JS:

$('select').change(function(){ 
    var sel = $(this); 
    var data = sel.data('prev'); 
    var val = sel.val(); 
    var prev; 
    if(data){ prev = data.val; } 
    sel.data('prev', {val: val}); 
    sel.nextAll().each(function(){ 
     if(prev){ 
      $(this).find("[value='" + prev+ "']").prop("disabled",false); 
      $('.selectpicker').selectpicker('refresh'); 
     } 
     $(this).find("[value='" + val + "']").prop("disabled",true); 
     $('.selectpicker').selectpicker('refresh'); 
    }); 
    $('.selectpicker').selectpicker('refresh'); 
}); 

Answer 1

Вы можете проверить полученный эффект на код ниже - jsfiddle

$('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); 
        } 
       }) 
      }); 
     } 
     else { 
       $(this).parent().each(function() { 
       $(this.options).each(function() { 
        if ($(this).val() != "1") { 
         $(this).prop("disabled", false); 
        } 
       }) 
      }); 
     } 
    }); 
}