CODEWITHSUNDEEP
javascriptjquerybootstrap-4drop-down-menumulti-select
David Lee
David Lee

Reputation: 61

Multiselect uncheck selected checkbox and select the current selection

I have developed a code where I can only do single select in a multiselect dropdown and it will disable the rest of the selection. Now I do not want to disable the checkbox and if I select new checkbox I want to uncheck the selected checkbox, still with single select option only

my fiddle link : https://jsfiddle.net/cvinhar/z2037f1x/13/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<select name="soft_skill_list[]" class="soft_skill_list"  id="soft_skill_list" multiple="multiple">
  <option>Analysing data</option>
  <option>Banquets Operations</option>
  <option>Concierge Operations</option>
  <option>Customer service experience</option>
  <option>Measuring and calculating</option>
  <option>Micros</option>
  <option>Numeracy Skills </option>
  <option>Opening Hotels</option>
  <option>Opera</option>
  <option>Outside catering</option>
  <option>Pre-opening</option>
  <option>Procedures </option>
  <option>Proficiency in computer programming</option>
  <option>Public speaking experience </option>
  <option>Reservation</option>
  <option>Restaurants operations</option>
  <option>Revenue Analysis</option>
  <option>Rooms Division</option>
  <option>Safety and Security</option>
  <option>Sales administration</option>
  <option>Sales Operations</option>
  <option>Social Media</option>
</select>

$('#soft_skill_list').multiselect({
    enableFiltering: true,
    maxHeight:400,
    enableCaseInsensitiveFiltering:true, 
    nonSelectedText: 'Soft Skills *', 
    numberDisplayed: 2, 
    selectAll: false, 
    onChange: function(option, checked) {
            // Get selected options.
            var selectedOptions = $('#soft_skill_list option:selected');

            if (selectedOptions.length >= 1) {
                // Disable all other checkboxes.
                var nonSelectedOptions = $('#soft_skill_list option').filter(function() {
                    return !$(this).is(':selected');
                });                    

                nonSelectedOptions.each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', true);
                    input.parent('li').addClass('disabled');
                });                
                
            }
            else {
                // Enable all checkboxes.
                $('#soft_skill_list option').each(function() {
                    var input = $('input[value="' + $(this).val() + '"]');
                    input.prop('disabled', false);
                    input.parent('li').addClass('disabled');
                });
            }
        }});

Upvotes: 0

Views: 3531

Answers (1)

shotgun02
shotgun02

Reputation: 784

In onChange just first deselect all options and then select the current option and then refresh the multiselect..

$('#soft_skill_list').multiselect({
        enableFiltering: true,
        maxHeight:400,
        enableCaseInsensitiveFiltering:true, 
        nonSelectedText: 'Soft Skills *', 
        numberDisplayed: 2, 
        selectAll: false, 
        onChange: function(option, checked) {                       
                if(checked){
                    //$('#soft_skill_list').val([]).multiselect('refresh');
                    //$(option).prop("selected","selected");
                    //$('#soft_skill_list').multiselect('refresh');
                        $('#soft_skill_list').val(option[0].value).multiselect('refresh');
                }                
            }});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<select name="soft_skill_list[]" class="soft_skill_list"  id="soft_skill_list" multiple="multiple">
  <option>Analysing data</option>
  <option>Banquets Operations</option>
  <option>Concierge Operations</option>
  <option>Customer service experience</option>
  <option>Measuring and calculating</option>
  <option>Micros</option>
  <option>Numeracy Skills </option>
  <option>Opening Hotels</option>
  <option>Opera</option>
  <option>Outside catering</option>
  <option>Pre-opening</option>
  <option>Procedures </option>
  <option>Proficiency in computer programming</option>
  <option>Public speaking experience </option>
  <option>Reservation</option>
  <option>Restaurants operations</option>
  <option>Revenue Analysis</option>
  <option>Rooms Division</option>
  <option>Safety and Security</option>
  <option>Sales administration</option>
  <option>Sales Operations</option>
  <option>Social Media</option>
</select>

Upvotes: 1

Related Questions