我的 javascript 在页面加载后工作,但它没有在初始加载时隐藏 detail1 和 detail2 div。我在调用视图时在代码隐藏上设置值,但 javascript 仅在页面加载后用户更改当前值时触发。
这是我的代码:
@using System.Runtime.InteropServices.ComTypes
@using MobileServiceForms.miscclasses
@using MobileServiceForms.Models
@model HomeModels.AsmeForms
@{
ViewBag.Title = "Tank Inspection";
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.UserType').change(function () {
var value = $(this).filter(':checked').val();
if (value === "Detailed") {
$("#detailed1").show();
$("#detailed2").show();
}
else if (value === "Summary") {
$("#detailed1").hide();
$("#detailed2").hide();
}
});
});
</script>
<h2>@ViewBag.Title</h2>
<h3>@ViewBag.Message</h3>
<p>Please fill out the form below and click SUBMIT when you are done.</p>
<hr/>
<div>
@using (Html.BeginForm("SaveAsmeForm", "Forms", FormMethod.Post))
{
<div class="editor-field">
@Html.RadioButtonFor(m => m.SummaryOrDetailedEnum, "Detailed", new { @id = "Class_UTCompany", @class = "UserType" }) Detailed
@Html.RadioButtonFor(m => m.SummaryOrDetailedEnum, "Summary", new { @id = "Class_UTCompany", @class = "UserType" }) Summary
</div>
<label class="baselabel labeltop lesserfont">Account Number</label>
<label class="baselabel labelbottom">@Model.BranchNumber-@Model.AccountNumber</label>
<label class="baselabel labeltop lesserfont">Tank Serial Number</label>
<label class="baselabel labelbottom">@Model.TankSerialNumber</label>
<label class="baselabel labeltop lesserfont">Date of Inspection</label>
<label class="baselabel labelbottom">@DateTime.Now.ToShortDateString()</label>
<label class="baselabel labeltop lesserfont">Tank Size</label>
<label class="baselabel labelbottom">@Model.TankSize</label>
<label class="baselabel labeltop lesserfont">Inspector's Name</label>
@Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
<div id="detailed1">
<label class="baselabel labeltop lesserfont">Inspection Type</label>
@Html.DropDownListFor(model => model.InspectionType,
new SelectList(Model.InspectionTypeList),
"Select an option",
new { @class = "form-control comboboxnoblock" })
<label class="baselabel labeltop lesserfont">Relief Valve Date</label>
@Html.DropDownListFor(model => model.ReliefValveMonth,
new SelectList(Model.ReliefValveDateMonthList),
"Select an option",
new { @class = "form-control comboboxnoblock" })
@Html.DropDownListFor(model => model.ReliefValveYear,
new SelectList(Model.ReliefValveDateYearList),
"Select an option",
new { @class = "form-control comboboxnoblock" })
<label class="baselabel labeltop lesserfont">Relief Valve Manufacturer</label>
@Html.DropDownListFor(model => model.RelieveValveManufacturer,
new SelectList(Model.ReliefValveManufacturerList),
"Select an option",
new { @class = "form-control comboboxnoblock" })
<label class="baselabel labeltop lesserfont">Relief Valve Set Pressure 250 psi</label>
@Html.DropDownListFor(model => model.ReliefValveSetPressure,
new SelectList(Model.ReliefValveSetPressureList),
"Select an option",
new { @class = "form-control comboboxnoblock" })
<label class="baselabel labeltop lesserfont">Relief Valve Capacity</label>
@Html.DropDownListFor(model => model.ReliefValveCapacity,
new SelectList(Model.ReliefValveCapacityList),
"Select an option",
new { @class = "form-control comboboxnoblock" })
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.WeepHoles, new { @class = "checkbox" })
<label class="lesserfont">The weep holes are open and free of discharge.</label>
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.Corrosion, new { @class = "checkbox" })
<label class="lesserfont">There are no signs of corrosion, cracks, debris, tampering, or other mechanical damage.</label>
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.Leakage, new { @class = "checkbox" })
<label class="lesserfont">There is no leakage.</label>
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.Discharge, new { @class = "checkbox" })
<label class="lesserfont">The pressure relief device discharge meets the requirements of Clause 12.2.2 of CSA B51. (there is no obstruction to the path of discharge)</label>
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.Seal, new { @class = "checkbox" })
<label class="lesserfont">The Seal (where applicable) has not been broken.</label>
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.RainCap, new { @class = "checkbox" })
<label class="lesserfont">The Rain Cap, (where applicable) has been installed.</label>
</div>
<div id="detailed2">
<div class="spacer">
@Html.CheckBoxFor(m => m.Manufacturer, new { @class = "checkbox" })
<label class="lesserfont">The manufacturer's data plate or markings are present in accordance with the applicable design code (UL, CSA, CGA, NB).</label>
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.Pressure, new { @class = "checkbox" })
<label class="lesserfont">The Set pressure of the pressure relief device meets the specified.</label>
</div>
<div class="spacer">
@Html.CheckBoxFor(m => m.DischargeCapacity, new { @class = "checkbox" })
<label class="lesserfont">The discharge capacity of the pressure relief device is equal to or greater than the boiler output capacity stamped on the boiler name plate and complies with clause 12.2.1.2</label>
</div>
</div>
<input class="allformsbutton" type="submit" value="Submit" id="buttonAsmeDetailed" />
}
</div>
在后面的代码中,我设置了 SummaryOrDetailedEnum 的值,它在表单上的 RadioButtonFor 中设置了正确的值,但它并没有相应地隐藏 detail1 和 detail2 div。
如果 SummaryOrDetailedEnum 等于“详细”,那么我将显示这些 div id。如果它等于“摘要”,我将隐藏这些 ID。
有人知道我做错了什么吗?初始加载时值改变时js不应该执行吗?
感谢您的帮助!
答案 0 :(得分:0)
您的代码完全按照您的要求执行,您指示只有在有人更改复选框时才使 div 可见,因此,相反,保持 div 隐藏并且仅在更改函数中使它们可见。< /p>
$(function () {
$("#detailed1").hide();
$("#detailed2").hide();
$('.UserType').change(function () {
var value = $(this).filter(':checked').val();
if (value === "Detailed") {
$("#detailed1").show();
$("#detailed2").show();
}
else if (value === "Summary") {
$("#detailed1").hide();
$("#detailed2").hide();
}
})});