javascript - 在 mvc5 中单击复选框时使下拉菜单可见

Question

我有一个复选框。单击此复选框时，我想让下拉菜单可见。代码如下

<div>
        <input type="checkbox" name="SchoolAdmin" value="True" id="schooladmin">I would like to register as a school admin<br>
    </div>

    <div>
        @Html.DropDownList("school", new List<SelectListItem>
        {
            new SelectListItem{ Text="Please select", Value = "-1" },
            new SelectListItem{ Text="School1", Value = "1" },
            new SelectListItem{ Text="School2", Value = "0" }
        })
    </div>

上面的脚本如下

<script type="text/javascript">
$(document).ready(function() {
    if ($('.schooladmin').is(":checked")) {
        //show the hidden div
        $('#school').show("fast");
    } else {
        //otherwise, hide it
        $('#school').hide("fast");
    }
    $('.schooladmin').click(function () {
        // If checked
        if ($('.schooladmin').is(":checked")) {
            //show the hidden div
            $('#school').show("fast");
        } else {
            //otherwise, hide it and reset value
            $('#school').hide("fast");
            $('#school').val('');
        }
    });
});

任何人都可以帮助我...

Answer 1

.schooladmin 是一个 ID，您正在为其应用类选择器，请尝试使用 ID 选择器 #

这样写

if($('#schooladmin').is(":checked") // add #

代替

if ($('.schooladmin').is(":checked") // remove .

无处不在

你的代码应该是这样的:

$('#schooladmin').click(function () {
    if (this.checked)
        $('#school').show("fast");
    else
        $('#school').hide("fast");      
});

Demo