Hide jquery multiselect based on checkboxes

Question

Hi how do you hide a jquery multiselect based on checkboxes option? Here is my codes.

For example, I choose ch as the first checkbox, only id "ddl" will appear, I choose ch1 as the second checkbox, only id "ddl1" will appear. Lastly if I choose two checkboxes , both dropdownlist will appear.

Jquery

$(document).ready(
function()
{
    $('#ddl').hide();
    $('#ddl1').hide();

    $("#ch, #ch1").click(
        function()
        {
            if (this.id == "ch")
            {
                $("#ddl").hide();
                $("#ddl1").hide();
                $('input[name="ch"]').prop('checked', false);
                $('#ddl').multipleSelect();
                $("#ddl1").attr('disabled', true).trigger("liszt:updated");
            }
            else if(this.id == "choice1")
            {
                $("#ddl").hide();
                $("#ddl1").hide();
                $('input[name="ch1"]').prop('checked', false);
                $('#ddl1').multipleSelect();
                $("#ddl").attr('disabled', true).trigger("liszt:updated");

             }
        });
});

jsp

<input type="checkbox" name="ch" id="ch"> 
<input type="checkbox" id="ch1" name="ch1"> 
<select id="ddl" name="ddl" multiple="multiple">
                <option value="1"</option>
                <option value="2"</option>

                </option>


        </select>
        <select id="ddl1" name="ddl1" multiple="multiple">
                <option value="3"</option>
                <option value="4"</option>
        </select>

score 0 · Accepted Answer · edited May 23 '17 at 11:49

Working Example: http://jsbin.com/poneg/3/edit

I changed your markup a little you don't have to use it but I thought it would make it a little cleaner to read and use.

The select for the checkbox I got from here: Check if checkbox is checked with jQuery

JS:

$(document).ready(function(){
    $('select').hide();
    $('select').multipleSelect();

    $("input").on('mouseup',function(){

            var isChecked = $(this).prop('checked');
            var thisRef = $(this).attr('ref');

            if(isChecked){
              $('select[ref="'+thisRef+'"]').hide();
            } else {
              $('select[ref="'+thisRef+'"]').show();
            }

    });
});

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<input ref="1" type="checkbox" id="ch1" name="ch1" > 
<input ref="2" type="checkbox" id="ch2" name="ch2"> 

<select ref="1" id="dd1" name="dd1" multiple="multiple">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select ref="2" id="dd2" name="dd2" multiple="multiple">
    <option value="3">3</option>
    <option value="4">4</option>
</select>

</body>
</html>

Hi now,I have multiple select function, how do I apply it in my jquery? — Programm3r, Oct 03 '14 at 05:30
I changed the answer to show where I would put it, I haven't tested it but I would imagine that would work. As long as that doesn't get unbinded when hiding/showing (it shouldn't) that should work fine. I also hope those selectors aren't too generic and that they don't start applying that to things you didn't want to. In any case give that a shot. — tbh__, Oct 03 '14 at 06:30

Hide jquery multiselect based on checkboxes

1 Answers1