Question

取消选中选项时出现问题（＆＃34; 1＆＃34;）。当取消选中时，我无法选择选项以返回其初始状态，即重置。所以我认为JQuery在取消选中时会检测到，但是，我不知道该怎么做。

下面是我的问题的模拟：

＆＃13;

var unique = 1;

$('select').on('change', function(){
    var options = $('.selectpicker').find('option').filter(function(){
        return unique == this.value;
    });
    //para nao ocultar do select pai
    if(unique == this.value){
        options.hide();
        $(this).find('option[value="'+unique+'"]').show();
        $(this).each(function() {
                $(this.options).each(function() {
                	if(($(this).val() == "1")){
                  }
                    if ($(this).val() != "1") {
                        $(this).prop("disabled", true);
                    }
                })
            });
        $('.selectpicker').selectpicker('refresh');
    }
    else {
        if($(this).find('option[value="'+unique+'"]:visible').size() > 0){
            options.show();
           
        }
    }
});

＆＃13;

<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="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="conhecimento">Para Conhecimentor</option>
      <option value="participante">Participante</option>
    </select>

＆＃13;

Answer 1

不确定这是否是您要实现的目标，但我认为如果选择了某个选项，您要禁用选项，如果未选择则启用。

var val = 1;
$('#funcao').on('change', function() {
  var $option = $('#' + this.id + ' option[value="' + val + '"]');
  if (this.value == val) {
    $option.attr('selected', true);
    toogleOptions(this, true, false);
  } else if ($option.attr('selected')) {
    $option.removeAttr('selected');
    toogleOptions(this, false);
  }
});

function toogleOptions(elm, disabled, selected) {
  $(elm).each(function() {
    $(this.options).each(function() {
      if ($(this).val() != val) {
        $(this).prop("disabled", disabled);
        $(this).prop("selected", selected);
      }
    })
  });
  $(elm).selectpicker('refresh');
};

.row {
  margin: 30px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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" />

<div class="container row">
  <select class="selectpicker" id="funcao" multiple>
    <option value="1">Líder</option>
    <option value="conhecimento">Para Conhecimentor</option>
    <option value="participante">Participante</option>
  </select>
</div>

如何禁用选项，或者jquery检测到此操作（取消选择）？

1 个答案: