我想在用户填写第1部分的最后一项时选中复选框basic info，在填写联系人详细信息部分等时选中复选框contact details，依此类推，还有Next按钮的颜色每次填满或选择最后一项时，都会变为绿色。
另外，我还有一般信息部分，当用户移至下一部分时，内容将从第三部分的basic info变为contact details到select a course。
脚本
$('.next').click(function () {
var container = $(this).closest('.section');
var isValid = true;
$.each(container.find('input'), function () {
$('form').validate().element($(this));
if (!$(this).valid()) {
isValid = false;
return false;
}
});
if (isValid) {
container.next('.section').show().find('input').first().focus();
container.hide();
} else {
container.find('.error').text('please complete fields');
}
});
$('.previous').click(function () {
debugger;
var container = $(this).closest('.section');
container.prev('.section').show().find('input').first().focus();
container.hide();
});
查看
@using (Html.BeginForm("OnlineEnrolment", "Home", FormMethod.Get))
{
@Html.AntiForgeryToken()
<div class="container">
<div class="form-horizontal">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<span class="panelfont"> 1 APPLY</span>
<div class="navheader">
@Html.LabelFor(m => m.IsBasicInfo, "basic info")
@Html.CheckBoxFor(m=>m.IsBasicInfo,new { @id = "basicInfo",@class="chkbox" })
</div>
<br />
<div class="navcontactdetails">
@Html.LabelFor(m => m.IsContactDetails, "contact details")
@Html.CheckBoxFor(m => m.IsBasicInfo, new { @id = "contactdetails", @class = "chkbox" })
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<span class="panelfont"> 2 SELECT A COURSE</span>
<div class="navheader">
@Html.LabelFor(m => m.IsSelectCourse, "select a course")
@Html.CheckBoxFor(m => m.IsSelectCourse, new { @id = "selectcourse", @class = "chkbox" })
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<span class="panelfont"> 3 FINISH</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="section">
<div class="panel panel-default">
<h4>BASIC INFO</h4>
<div class="panel-body">
<div class="form-group has-success ">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
<span class="input-group-addon"><i class="glyphicon glyphicon-ok"></i></span>
</div>
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EmailId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.EmailId, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.EmailId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-calendar"></i>
</div>
@Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="CoursesStudiedYesNo" style="padding-left:6em;">
@Html.Label("Have you studied before?")
<br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "Yes")<span id="SpacebetweenRadioandText">Yes</span><br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "No", new { @checked = "checked" })<span id="SpacebetweenRadioandText">No</span>
</div>
</div>
<div class="form-group ">
<div class="CoursesDropdown" style="padding-left:6em;">
@Html.LabelFor(model => model.CoursesStudied, htmlAttributes: new { @class = "control-label " })
<br />
@Html.DropDownListFor(m => m.CoursesStudied, Model.CoursesStudiedList, "Choose the course you have studied here", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CoursesStudied, "", new { @class = "text-danger" })
</div>
</div>
<div class="error"></div>
<button type="button" class="next pull-right">NEXT</button>
</div>
</div>
</div>
<div class="section">
<div class="panel panel-default">
<h4>CONTACT DETAILS</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Phone", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Mobile", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.mobileNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.mobileNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Address", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control", placeholder = "Street" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Suburb, new { htmlAttributes = new { @class = "form-control", placeholder = "Sub" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control", placeholder = "City" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Region, new { htmlAttributes = new { @class = "form-control", placeholder = "Region" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control", placeholder = "Country" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
<div class="error"></div>
<button type="button" class="previous pull-left">PREVIOUS</button>
<button type="button" class="next pull-right">NEXT</button>
</div>
</div>
</div>
<div class="section">
<div class="panel panel-default">
<h4>SELECT A COURSE</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Course", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CourseName, Model.CourseNameList, "Choose a course", new { @class = "form-control" })
</div>
</div>
<div class="error"></div>
<button type="button" class="previous pull-left">PREVIOUS</button>
<button type="button" class="next pull-right">NEXT</button>
</div>
</div>
</div>
<div class="section">
<div class="panel panel-default">
<h4>SUMMARY</h4>
<div class="panel-body">
<div>
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd id="display-name">
@Html.DisplayFor(model => model.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.EmailId)
</dt>
<dd id="display-emailid">
@Html.DisplayFor(model => model.EmailId)
</dd>
<dt>
@Html.DisplayNameFor(model => model.DOB)
</dt>
<dd id="display-dob">
@Html.DisplayFor(model => model.DOB)
</dd>
<dt>
@Html.DisplayName("Study History")
</dt>
<dd id="display-coursesstudied">
@Html.DisplayFor(model => model.CoursesStudied)
</dd>
<dt>
@Html.DisplayNameFor(model => model.PhoneNumber)
</dt>
<dd id="display-phone">
@Html.DisplayFor(model => model.PhoneNumber)
</dd>
<dt>
@Html.DisplayNameFor(model => model.mobileNumber)
</dt>
<dd id="display-mobile">
@Html.DisplayFor(model => model.mobileNumber)
</dd>
<dt>
@Html.DisplayName("Address")
</dt>
<dd id="display-street">
@Html.DisplayFor(model => model.Street)
</dd>
<dd id="display-suburb">
@Html.DisplayFor(model => model.Suburb)
</dd>
<dd id="display-city">
@Html.DisplayFor(model => model.City)
</dd>
<dd id="display-region">
@Html.DisplayFor(model => model.Region)
</dd>
<dd id="display-country">
@Html.DisplayFor(model => model.Country)
</dd>
<dt>
@Html.DisplayName("Selected Course")
</dt>
<dd id="display-coursename">
@Html.DisplayFor(model => model.CourseName)
</dd>
</dl>
</div>
<div class="error"></div>
<button type="button" class="previous pull-left">PREVIOUS</button>
<button type="submit" class="submit pull-right">SUBMIT</button>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<span class="panelfont"> GENERAL INFORMATION</span>
<div class="panel panel-default">
<div class="panel-body">
<div id="basic">
<span class="panelfont"> Step 1: Basic Info</span>
<p>This is the basic information of this online portal</p>
</div>
<div id="contact">
<span class="panelfont"> Step 1: Contact details</span>
<p>This is the contact details of online portal</p>
</div>
<div id="contact">
<span class="panelfont"> Step 2: Select a Course</span>
<p>This is the contact details of online portal</p>
</div>
</div>
</div>
</div>
</div>
</div>
}
答案 0 :(得分：2)
您可以创建一个用于选中复选框的新功能，以便可以在每次{strong>新使用form-control的时候对它进行调用。因此，当您在此处编辑任何输入时，它将检查验证是否正常，如果正常，则将选中复选框。您需要一个与它的复选框具有相同ID的data-name属性。我在codepen上写了它，看起来还不错。
function checkit(elm) {
var container=$(".container").find("[data-name='" + elm + "']");
var isValid = true;
$.each( container.find('input'), function () {
$('form').validate().element($(this));
if (!$(this).valid()) {
isValid = false;
return false;
} })
if (isValid) { return true; } else { return false}};
$('.next').click(function () {
var container = $(this).closest('.section');
var isValid = true;
$.each(container.find('input'), function () {
$('form').validate().element($(this));
if (!$(this).valid()) {
isValid = false;
return false; }
});
if (isValid) {
container.next('.section').show().find('input').first().focus();
container.hide();
} else {
container.find('.error').text('please complete fields'); }
});
$('.form-control').blur(function () {
var name = $(this).closest('.section').attr("data-name");
var elm = $(this).closest('.section');
if ( checkit(name)) {
$('#'+name).prop('checked', true);
} else {
$('#'+name).prop('checked', false);
} }) ;