How do I have at most one selected leader in all selects?

Question

How do I make to when I select the Leader option, the javascript do not allow another function to be selected (multiselect)?

The scenario is as follows: Each select represents the functions of each user.

The user who is selected as Leader, cannot have any other function; only that of Leader.

If the option is different from Leader, then javascript allows selecting more than one function.

Here is my attempt:

$("select").on("change", function() {
    var self = $(this);
    var values = self.val();

    $("select").not(self).each(function() {
        var _values = $(this).val();
		if (_values == "1") {
    $(this).selectpicker('deselectAll')
			for (var v = _values.length; v--;) {
				if (values.indexOf(_values[v]) >= 0) {
					_values.splice(v, 1);
				}
			}

			$(this).val(_values);
		}
    });

	$(".selectpicker").selectpicker("refresh");
});

<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" />

<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>

Answer 1

I believe that’s what you want:

$("select").on("change", function() {
    var self = $(this);

    if($.inArray('1', self.val()) != -1) {
      self.find('[value!="1"]').prop('selected', false).prop('disabled', true);
    } else {
      self.find('[value!="1"]').prop('disabled', false);
    }
  
    // Bloquear as opções líderes caso alguma seja selecionada
    var selectedValues = $.map($('select option:selected'), function(el) {
      return el.value;  
    });
    
    if($.inArray('1', selectedValues) != -1) {
      $('option[value="1"]:not(:selected)').prop('disabled', true);
    } else {
      $('option[value="1"]').prop('disabled', false);
    }

	$(".selectpicker").selectpicker("refresh");
});

<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" />

<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>
<br><br>
<select class="selectpicker" multiple>
      <option value="1">Líder</option>
      <option value="10">Para Conhecimentor</option>
      <option value="11">Participante</option>
    </select>

Explanation:

The select will be monitored by the event change, then every time you have a change in the value it will perform the function.

In the function I get the values of the select modified, and check if any of these values is equal to 1, if yes I search for all options that select which are different from 1 and shot the property selected and add to disabled, if value 1 has not been selected, I enable all options again.