CODEWITHSUNDEEP
javascriptjqueryhtmlcssdropdown
Justin C
Justin C

Reputation: 316

Enable/Disable Multiple Dropdowns Using Jquery?

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" />

Upvotes: 0

Views: 2810

Answers (2)

Manish Kumar Gurjar
Manish Kumar Gurjar

Reputation: 655

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...

enter image description here

enter image description here

enter image description here

enter image description here

Upvotes: 1

Rob Imig
Rob Imig

Reputation: 496

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.

Upvotes: 1

Related Questions