ASP.Net网站Bootstrap Multiselect复选框功能失效报错求助

Let's break down how to resolve this error and get your checkbox-based multiselect working smoothly with Knockout.js:

1. First, Fix the "multiselect is not a function" Error #

This error almost always traces back to script loading issues or timing mismatches. Let's tackle the common culprits:

• Verify Script Loading: Open your browser's DevTools (F12) → Network tab, and confirm that bootstrap-multiselect.js loads successfully (no 404 errors). Your CDN URL looks correct, but if it fails, double-check for regional CDN issues or try a cached version.
• Avoid Duplicate jQuery Loads: Make sure you aren't loading jQuery a second time elsewhere in your page. A second jQuery instance will overwrite the first one, losing access to plugins like multiselect that attach to the original instance.
• Wait for DOM & Knockout to Be Ready: Your multiselect() call needs to run after both the DOM is fully loaded and Knockout finishes binding the select element. Wrap your initialization code in $(document).ready(), and run it after ko.applyBindings():

  $(document).ready(function() {
      // First apply your Knockout bindings
      ko.applyBindings(yourViewModel);
  
      // Now initialize the multiselect
      $('#SecondaryLicenseStatuses').multiselect();
  });
  

  Alternatively, use Knockout's afterRender binding to trigger initialization right after the select is rendered:

  <select class="form-control" id="SecondaryLicenseStatuses" 
          data-bind="options: TabLicense.SecondaryLicenseStatuses, 
                     selectedOptions: TabLicense.SecondaryLicenseStatusesSelections, 
                     optionsText: 'name',
                     afterRender: function() { $('#SecondaryLicenseStatuses').multiselect(); }" 
          multiple="multiple"></select>
  

2. Sync Bootstrap Multiselect with Knockout's Two-Way Binding #

Since you're using Knockout's selectedOptions binding, you need to ensure the multiselect component and Knockout stay in sync. Otherwise, checkbox selections won't update your ViewModel, and ViewModel changes won't reflect in the multiselect.

Here's how to set up the sync:

$(document).ready(function() {
    ko.applyBindings(yourViewModel);
    var $select = $('#SecondaryLicenseStatuses');

    // Initialize multiselect with handy options
    $select.multiselect({
        includeSelectAllOption: true, // Adds a "Select All" checkbox
        maxHeight: 300, // Limits dropdown height for long option lists
        onChange: function() {
            // Trigger a change event so Knockout picks up the selection
            $select.trigger('change');
        }
    });

    // Watch for changes in Knockout's selectedOptions and refresh the multiselect
    ko.computed(function() {
        // Unwrap the observable to trigger the computed on changes
        ko.unwrap(yourViewModel.TabLicense.SecondaryLicenseStatusesSelections);
        // Use setTimeout to avoid timing conflicts with Knockout's update cycle
        setTimeout(function() {
            $select.multiselect('refresh');
        }, 0);
    });
});

3. Clean Up Your Select Element #

You can remove the size="5" attribute from your select — Bootstrap Multiselect replaces the native select element with its own styled UI, so this attribute won't have any effect and just adds unnecessary code.

Your cleaned-up select will look like this:

<select class="form-control" id="SecondaryLicenseStatuses" 
        data-bind="options: TabLicense.SecondaryLicenseStatuses, 
                   selectedOptions: TabLicense.SecondaryLicenseStatusesSelections, 
                   optionsText: 'name'" 
        multiple="multiple"></select>

4. Verify Version Compatibility #

Your current version stack (jQuery 1.9.1, Bootstrap 3.3.6, Bootstrap Multiselect 0.9.13) is compatible, but if you're still running into issues, try updating jQuery to the latest 1.x stable release (like 1.12.4) — older jQuery versions can have edge-case compatibility issues with newer plugins.

After following these steps, your multiselect should render with checkboxes, allow selection without holding Ctrl, and stay in perfect sync with your Knockout ViewModel.

内容的提问来源于stack exchange，提问作者Noman Ahmad