Make a dropdown visible on check box click in mvc5

Question

I have a check box. On this checkbox's click i want to make a drop down visible. the code is as follows

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

and the script for the above is as follows

<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('');
        }
    });
});

Anybody there to help me out pls...

Answer 1

.schooladmin is an ID and you're applying class selector to it, Try ID selector # for the same

So write

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

instead of

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

Everywhere

Your code should be like this:

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

Demo