Bootstrap Multiselect插件並在更改事件中禁用/啓用複選框

Question

我使用Bootstrap Multiselect來顯示年份列表，其中所選年份的最大數量可以是4。如果選擇4年，則禁用所有未選定的年份;如果一年中沒有選中計數3，則再次啓用所有年份。

（最新提交關於該插件的項目是增加的啓用/禁用功能，但我不認爲這是個人的選擇元素 - https://github.com/davidstutz/bootstrap-multiselect/issues/171）

我的HTML：

<select id="slYears" class="multiselect" multiple="multiple"> 
    <option value="1" disabled="disabled">2009</option> 
    <option value="2" selected="selected">2010</option> 
    <option value="3" selected="selected">2011</option> 
    <option value="4" selected="selected">2012</option> 
    <option value="5" selected="selected">2013</option> 
</select> 

我的JavaScript （第一次嘗試）：

$('#slYears').change(function() { 
    var arr = $(this).val().toString().split(','); 
    if (arr.length >= 4) { 
     $('#slYears option').each(function() { 
      if (!$(this).is(':selected')) { 
       $(this).prop('disabled', true); 
      } 
     }); 
    } 
    else { 
     $('#slYears option').each(function() { 
      $(this).prop('disabled', false); 
     }); 
    } 
}); 

然後我嘗試使用一些插件的方法和示例。我嘗試使用「全部選擇」示例來啓用所有，我嘗試使用'onchange'事件，但沒有任何作用。

這裏是的jsfiddle：http://jsfiddle.net/389Af/1/（注意我粘貼上面的JS之前的插件JS）

Answer 1

好，我想出了一個解決方案。我向該插件的當前主分支添加了一個演示。請看這裏：http://davidstutz.github.io/bootstrap-multiselect/#further-examples。代碼如下所示。在這種代碼的select具有ID example37：

$('#example37').multiselect({ 
    onChange: function(option, checked) { 
    // Get selected options. 
    var selectedOptions = $('#example37 option:selected'); 

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

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

一些說明：selectedOptions是當前選擇的選項的陣列。如果選擇4個或更多選項，則其他複選框將被禁用（不可見選擇內的選項不會被禁用）。如果選擇少於4個選項，則所有複選框都會再次啓用。

Answer 2

大衛的回答幫了我很多。感謝那。

我將他的代碼更改爲更通用/適用於任何多選。

它要求設置選擇元素數據值「max」。 <select ... data-max="5"/>

onChange: function (element) { 
    var me = $(element), // is an <option/> 
     parent = me.parent(),// is a <select/> 
     max = parent.data('max'), // defined on <select/> 
     options, // will contain all <option/> within <select/> 
     selected, // will contain all <option(::selected)/> within <select/> 
     multiselect; // will contain the generated ".multiselect-container" 

    if (!max) { // don't have a max setting so ignore the rest 
     return; 
    } 

    // get all options 
    options = me.parent().find('option'); 

    // get selected options 
    selected = options.filter(function() { 
     return $(this).is(':selected'); 
    }); 

    // get the generated multiselect container 
    multiselect = parent.siblings('.btn-group').find('.multiselect-container'); 

    // check if max amount of selected options has been met 
    if (selected.length === max) { 
     // max is met so disable all other checkboxes. 

     options.filter(function() { 
      return !$(this).is(':selected'); 
     }).each(function() { 
      multiselect.find('input[value="' + $(this).val() + '"]') 
       .prop('disabled', true) 
       .parents('li').addClass('disabled'); 
     }); 

    } else { 
     // max is not yet met so enable all disabled checkboxes. 

     options.each(function() { 
      multiselect.find('input[value="' + $(this).val() + '"]') 
       .prop('disabled', false) 
       .parents('li').removeClass('disabled'); 
     }); 
    } 
} 

這將是不錯的東西像一個「最大允許的」選項是組件規範的一部分.. ;-)