Enable/Disable Multiple Dropdowns Using Jquery?

Question

I'm using Eric Hynds' awesome drop down plugin, but I need to use the enable/disable function on multiple dropdowns. The form I will be building is very complex, and multiple dropdowns will be enable by nice Jquery sliders.

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#enabledisable

The code below has a var in it that I am not quite sure what it's doing given there are not multiple drop downs already. Any help on how to make this happen? Below is the tiny javascript on the page and the trigger. I need to have separate buttons so I can trigger different dropdowns, but I'm not seeing how to do it with the code right now.

var $widget = $("select").multiselect(), 
    state = true;

$("#toggle-disabled").click(function(){
   state = !state;
   $widget.multiselect(state ? 'disable' : 'enable');
});

And then I am using another plugin which converts list/input items into sliders, so if it looks weird I'm toggling off of list, that's because it's the only way to catch the mouse event that way. :P

<li class="toggle-disabled"><label for="family">Family Medicine </label><input type="checkbox" id="family" name="family" />

Rob Imig · Accepted Answer · 2016-01-22 16:24:49Z

1

The $widget variable is a jquery selector that selects ALL the <select> elements that you can operate on later. So as long as you add another <select> element, the javascript code in the example will apply to both multiselects.

Here's a jsfiddle showing that:

http://jsfiddle.net/rimig/e95y2jgL/2/

So you'll see I just added another multiselect:

<select name="example-disabled" disabled="disabled" multiple="multiple" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

<br>

<select name="example-disabled" disabled="disabled" multiple="multiple" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

And you can keep the javascript the same for the toggle to apply to both elements.

answered Jan 22, 2016 at 16:24

Rob Imig

5264 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justin C Over a year ago

Hey thanks so much, but I'm so sorry! I must have made my question ambiguous. What if I want a different button to toggle every widget individually. That's what I was looking for! Sorry about that!

Rob Imig Over a year ago

@JustinC oh yea that was a bit confusing, if you want multiple buttons to toggle various multi-selects you would want to attach different click handlers individually for each of the controlling buttons. something like this: jsfiddle.net/rimig/hxz089hv

Manish Kumar Gurjar · Accepted Answer · 2021-07-28 09:50:49Z

Disable/Enable Multi Select DDL using jquery: First you need to add "bootstrap-multiselect.js" in your code.

<script src=".../js/bootstrap-multiselect.js"></script>

After that add the multi select DDL code as below...

<select id="ddlCategory" class="form-control" multiple="multiple">
  <option value="1">General</option>
  <option value="2">Manufacturing</option>
</select>

<button type="button" class="btn blue btn-small" onclick="BtnDisable();">Disable</button>
<button type="button" class="btn blue btn-small" onclick="BtnEnable();">Enable</button>

And add jquery code as below...

<script>
     $(function () {

        $("#ddlCategory").multiselect({
          nonSelectedText: '--Category--',
          disableIfEmpty: true,
          includeSelectAllOption: true,
          allSelectedText: 'No option left ...',
          numberDisplayed: 1,
          maxHeight: 400
        });

     });
     
    function BtnDisable(){
      $("#ddlCategory").multiselect('disable');
    }
    
    function BtnEnable(){
      $("#ddlCategory").multiselect('enable');
    }

</script>

And some screenshots for the result...

Collectives™ on Stack Overflow

Enable/Disable Multiple Dropdowns Using Jquery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related