如何根据<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); 
        } 
       }) 
      }); 
     } 
    }); 
}