Bootstrap: Multiselect: Onchange снимите флажок - PullRequest
Новая
       3

Bootstrap: Multiselect: Onchange снимите флажок

0 голосов
/ 11 мая 2018

Я реализовал загрузочный выпадающий список с несколькими флажками.

Я хочу разрешить пользователям выбирать только 3 опции или флажки. Если пользователь попытается выбрать более 3, я хотел бы показать предупреждающее сообщение и не позволять им выбирать 4-й вариант.

Вот код: 

$(function() {
  $('#template').multiselect({
    includeSelectAllOption: true,
    enableCaseInsensitiveFiltering: true,
    numberDisplayed: 1,
    maxHeight: 250,
    includeSelectAllOption: false,
    onChange: function(option, checked, select) {
      if (checked == true) {
        var last_valid_selection = null;
        if ($('#template option:selected').length > 3) {
          alert('sorry');
          var $element = $(this);
          $($element).prop('checked', false);
        }
      }
    }
  });
});

Как я могу сделать это onchange событие выпадающего списка множественного выбора?

1 Ответ

0 голосов
/ 11 мая 2018

Вы можете почти полностью решить эту проблему с помощью jQuery. Основная идея заключается в том, что ваш обработчик onChange захочет посмотреть текущее количество выбранных опций в select. Если выбрано более x параметров, добавьте отключенный атрибут к другим параметрам, используя

$("#typeCheckboxSelect option:not(:selected)").prop('disabled', true);

В противном случае, если выбранных параметров меньше, чем x, вы хотите убедиться, что нет отключенных параметров, выбрав все параметры и отключив их, используя

$("#typeCheckboxSelect option:disabled").prop('disabled', false);

Обратите внимание, что после каких-либо изменений в базе выберите html, вам нужно обновить мультиселект.

Ниже я собрал рабочий пример приведенного выше описания. Дайте мне знать, если у вас есть какие-либо вопросы по коду. 

var maxCount = 3;
$("#typeCheckboxSelect").multiselect({
  includeSelectAllOption: true,
  enableCaseInsensitiveFiltering: true,
  numberDisplayed: 1,
  maxHeight: 250,
  includeSelectAllOption: false,
  onChange: function(option) {
    //Get selected count
    var selectedCount = $("#typeCheckboxSelect").find("option:selected").length;
    //If the selected count is equal to the max allowed count (3 here), then disable any unchecked boxes
    if (selectedCount >= maxCount) {
      $("#typeCheckboxSelect option:not(:selected)").prop('disabled', true);
      $("#typeCheckboxSelect").multiselect('refresh');
      alert("Only allowed to select " + maxCount + " options.");
    }
    //If the selected count is less than the max allowed count (3 here), then set all boxes to enabled
    else {
      $("#typeCheckboxSelect option:disabled").prop('disabled', false);
      $("#typeCheckboxSelect").multiselect('refresh');
    }

  }
});
<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-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet" />


<select id="typeCheckboxSelect" multiple="multiple">
  <option value='test1'>Test One</option>
  <option value='test2'>Test Two</option>
  <option value='test3'>Test Three</option>
  <option value='test4'>Test Four</option>
  <option value='test5'>Test Five</option>
  <option value='test6'>Test Six</option>
</select>
...