bootstrap-select in nav

by André Albson

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<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>

JavaScript

var unique = "1";

    $('select').selectpicker();

    $('select').on('change', function (e) {
        var selectedOptions = $(e.target).val();
        if(selectedOptions.indexOf(unique) != -1) {
            $('select').each(function(i, sel) {
                if (sel == e.target) {
                    $(sel).children().each(function(i, opt) {
                        if (opt.value != unique) {
                            $(opt).prop("disabled", true);
                            $('select').selectpicker('refresh');
                        }
                    });
                }
                else {
                    $(sel).children().each(function(i, opt) {
                        if (opt.value == unique) {
                           $(opt).prop("disabled", true);
                           $('select').selectpicker('refresh');
                        }
                    });
                }
            });
        }

        var unique_exists = false;

        $('select').each(function(i, sel) {
            var selectedOptions = $(sel).val();
            if (selectedOptions.indexOf(unique) != -1) {
                unique_exists = true;
            }
        });

        if(!unique_exists) {
            $('select').each(function(i, sel) {
                $(sel).children().each(function(i, opt) {
                    $(opt).prop("disabled", false);
                    $('select').selectpicker('refresh');
                });
            });
        }
    });