根据下拉选择显示/隐藏控件mvc 4 razor c#

时间:2015-02-18 17:29:14

标签: javascript c# asp.net-mvc razor

这是我的代码

@Html.DropDownListFor(z => z.SelectedReportId, new SelectList(Model.ReportTypes, "Value", "Text", Model.SelectedReportId), "-- Select Report --")
@Html.CheckBoxFor(model => model.IncludePhotos)@Html.LabelFor(model => model.IncludePhotos)

生成:

<select data-val="true" data-val-number="The field SelectedReportId must be a number." data-val-required="The SelectedReportId field is required." id="SelectedReportId" name="SelectedReportId">
    <option value="">-- Select Report --</option>
    <option value="1">Excel Report</option>
    <option value="2">Text Report</option>
</select>
<br />
<input data-val="true" data-val-required="The Include photos in the report field is required." id="IncludePhotos" name="IncludePhotos" type="checkbox" value="true" />

我有一个下拉列表和一个复选框,如果用户选择下拉列表中的第一个值,我需要禁用该复选框。 这是我正在使用的javascript没有成功

$(function () {
    $('#SelectedReportId').change(function () {
        var value = $(this).val();
        if (value == '1') {
            $('#IncludePhotos').show();
        } else {
            $('#IncludePhotos').hide();
        }
    });
});

感谢任何帮助,谢谢

2 个答案:

答案 0 :(得分:7)

在@section scripts {}部分中包含javascript并且它开始工作,

@section scripts{ <script type="text/javascript">
$(function () {
    $('#SelectedReportId').change(function () {
        var value = $(this).val();
        if (value == '1') {
            $('#IncludePhotos').show();
        } else {
            $('#IncludePhotos').hide();
        }
    });
});</script>}

答案 1 :(得分:1)

试试这个

@Html.DropDownListFor(z => z.SelectedReportId, new SelectList(Model.ReportTypes, "Value", "Text", Model.SelectedReportId),new {id="myDropdown"}

@Html.CheckBoxFor(model => model.IncludePhotos,new {id="myCheckbox"})

$(function () { $('#myDropdown').change(function () { var value = $(this).val(); var fistVal=$('#myDropdown option:first-child').attr("selected", "selected"); if (value == fistVal) { $('#IncludePhotos').show(); } else { $('#IncludePhotos').hide(); } }); });