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

Question

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

Navigation

#1 by (1 votes)

3

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

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

The user who is selected as Leader , can not have any other role; only Leader.

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

Here's 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><scriptsrc="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><linkhref="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>

javascript html jquery html-select twitter-bootstrap

asked by anonymous 30.11.2016 / 03:45

1 answer

autocomplete="off" in input type "password" is required? Because? Is it possible to add a function in a json?

score 1 · Accepted 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><scriptsrc="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><linkhref="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 change event, so every time you have a change in value it will execute 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 of that select that are different from 1 and I shot property% I want to add all of the selected and add it to disabled , if value 1 has not been selected, I enable all options again.