I am new to using jQuery. I am using c#/net to create and edit view. In my create view I have:
<div class="editor-label">
@Html.LabelFor(model => model.Pregnant)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Pregnant)
@Html.ValidationMessageFor(model => model.Pregnant)
</div>
<div class="editor-label dueDate">
@Html.LabelFor(model => model.DueDate)
</div>
<div class="editor-field dueDate">
@Html.TextBox("DueDate", null, new { @class = "datepicker" })
@Html.ValidationMessageFor(model => model.DueDate)
</div>
$(function() {
$('.dueDate').hide();
$('#Pregnant').change(function() {
if ($('#Pregnant').is(':checked')) {
$('.dueDate').show();
}
else {
$('.dueDate').hide();
}
});
Which works fine so if the pregnant tick box is ticked the due date appears.
The problem I have is when I go to the edit page... If i use the same code if the the dueDate
is hidden on load no matter if the tick box is ticked or not. Which is what the code says.
I would like it however in the edit page to check if the tick box is ticked and then do the proper show or hide on load. -- I'm new to jQuery so don't know what to do.
Pseudocode it would be:
onload
if #pregnant.is checked
then show dueDate
else
dueDate.hide and empty dueDate Value
I have tried:
$('.dueDate').val('');
Hopefully this makes sense.
if there is ONE checkbox with id="Pregnant"
and one or more elements with class="duedate"
then the code could be
$('#Pregnant').on("click",function () {
$('.dueDate').toggle(this.checked);
});
If there are more than one checkbox, you cannot use ID since it must be unique, use class instead and then possibly the data attribute if you need to show a specific duedate
Before you run the $('.dueDate').hide(); code, you can just add an if so that it only hides if the checkbox is unchecked.
if (!$('#Pregnant').is(':checked'))
$('.dueDate').hide();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.