如何根據<option selected>禁用<option>？

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); 
        } 
       }) 
      }); 
     } 
    }); 
}