开发者

Disable the jquery multiselect

开发者 https://www.devze.com 2023-03-16 21:32 出处:网络
How can i disable the multiselected plugin jquery multiselect in the above link its toggled i want to enable or disable开发者_开发技巧 depending upon a particular condition.

How can i disable the multiselected plugin

jquery multiselect

in the above link its toggled i want to enable or disable开发者_开发技巧 depending upon a particular condition.

tnx for the help.


$("#mymultiselect").multiselect("disable");

should do the trick.

HTML:

<select id="test001" multiple="multiple" size="5"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
    <option value="option3">Option 3</option> 
    <option value="option4">Option 4</option> 
    <option value="option5">Option 5</option> 
</select> 

Javascript:

$("#test001").multiselect({
    minWidth: 300,
    height: 150,
    header: false,
    noneSelectedText: "Select",
    selectedList: 3
});

Calling $("#test001").multiselect("disable"); will disabled the multiselect.

Here's an jsfiddle


Don't know how much JavaScript you know, but $widget.multiselect('disable'); will disable the selector (stored in the variable $widget). And by replacing disable with enable you can enable it.

So just run the function with the correct disable/enable setting and you can do it based on any condition.

Terw


if you change find("input:checked").length > 3 you can possible to select 3 value For ur wish you can change the.. value and get... your answer

  if( $(this).multiselect("widget").find("input:checked").length > 2 ){


I've updated the original fiddle posted earlier adding an enable button as well for quicker reference. http://jsfiddle.net/cSq2L/180/

$("#test001").multiselect({
        minWidth: 300,
        height: 150,
        header: false,
        noneSelectedText: "Select",
        selectedList: 3
    });


$("#changeStatus").click(function()
   {
   $("#test001").multiselect("disable");
   });                   

   $("#changeStatuss").click(function()
   {
   $("#test001").multiselect("enable");
   });     


This might be able to help you in a long run,Try this fiddle https://jsfiddle.net/JOKER123/bzuyp6xt/5/

function bs_muliselect_init(selector = '') {
  var selector = (selector != '') ? selector : '.bs_multiselect';
  var selector_index = $(selector).index();
  var selector_container_class = selector + '_container' + selector_index;
  selector_container_class = selector_container_class.replace(/[.#]/g, '');

  $(selector).multiselect({
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    includeSelectAllOption: true,
    optionClass: function(element) {
      return selector_container_class;
    },
    onChange: function(option, checked) {
      var max_limit = $(selector).attr('data-max_limit');
      var max_limit_msg = $(selector).attr('data-max_limit_msg');
      var selectedOptions = $(selector + ' option:selected');
      if (max_limit != undefined && max_limit != '' && !isNaN(max_limit)) {
        if (selectedOptions.length == max_limit) {
          alert(max_limit_msg);
          // Disable all other checkboxes.
          var nonSelectedOptions = $(selector + ' option').filter(function() {
            return !$(this).is(':selected');
          });

          nonSelectedOptions.each(function() {
            var input = $('.' + selector_container_class + ' input[value="' + $(this).val() + '"]');
            input.prop('disabled', true);
            input.parent('li').addClass('disabled');
          });
        } else {

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

精彩评论

暂无评论...
验证码 换一张
取 消