Question

你好如何隐藏基于复选框选项的jquery multiselect？这是我的代码。

例如，我选择ch作为第一个复选框，只选择id＆＃34; ddl＆＃34;将出现，我选择ch1作为第二个复选框，只选择id＆＃34; ddl1＆＃34;会出现。最后，如果我选择两个复选框，则会出现两个下拉列表。

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>

Answer 1

工作示例：http://jsbin.com/poneg/3/edit

我稍微改变了你的标记，你不必使用它，但我认为它会让你的阅读和使用更加清晰。

选中我从这里获得的复选框：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>

隐藏基于复选框的jquery multiselect

1 个答案: