jquery - 如何在 MVC 中单击按钮时选中复选框?
问题描述
我想basic info
在用户填写第 1 部分的最后一项时选中复选框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>
}
解决方案
您可以创建一个用于检查复选框的新函数,因此可以在每次新部分模糊form-control
时调用它。因此,当您在那里编辑任何输入时,它将检查验证是否正常,如果正常,则检查复选框。您需要一个与其复选框相同的数据名称属性。我在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);
} }) ;
推荐阅读
- c# - C# 使用 Parallel For 处理批量数据库查询
- python - Docker 烧瓶 - jinja2.exceptions.TemplateNotFound: index.html
- r - 将格式中的日期(2018 年 10 月 12 日)转换为 R 中的日期
- facebook - 无效范围:user_location。一键登录facebook?
- angular - Angular 6 反应形式。如何为多种语言构建表单
- java - 分析核心 java 以检查每个计数器的方法统计信息和延迟
- c++ - 如何包装可变参数模板函数?
- components - 访问模型类实例说“未定义”
- python - Jupyter Lab 未使用虚拟环境
- memory-leaks - IOS系统库导致内存泄漏