问如何根据<option selected>？关闭<option>？
EN

Stack Overflow用户

提问于 2016-11-23 11:48:09

回答 1查看 652关注 0票数 0

我有一个用户列表，每个用户都有一个角色。

被选为"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');
});

javascript

jquery

html

html-select

9.9元起，最快1天搭建自有直播

提供高并发、低延迟、易接入、极速高清的音视频直播服务，适用于直播电商/在线教育/音视频互动等多种场景

回答 1

Stack Overflow用户

发布于 2016-11-23 12:04:23

你可以用下面的代码查看效果-- 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);
                    }
                })
            });
        }
    }); 
}