javascript – How can I have at most one leader selected in all selects?

Question:

How do I when I select the Leader option , the javascript does not allow me to select another function (multiselect)?

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

The user who is selected as Leader can no longer have any other role; just that of Leader.

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

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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />

<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:

I believe this is 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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />

<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 change event, so every time it has a change in value it will execute the function.

In the function I get the values ​​of the modified select , and I check if any of these values ​​is equal to 1, if so I look for all the options that select that are different from 1 and remove the selected property and add disabled , if the value is 1 hasn't been selected, I enable all options again.

Post Views: 1
Scroll to Top