如何在MVC中单击按钮时选中复选框? [英] how to do check box checked on button click in MVC?
本文介绍了如何在MVC中单击按钮时选中复选框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要在用户填写第1部分的最后一项时选中复选框basic info，在联系方式部分填写后，请选中复选框contact details，依此类推，并且Next按钮的颜色每次都变为绿色.被填充或选中.
另外，我还有一般信息部分，当用户移至下一部分时，内容在第三部分中从basic info变为contact details到select a course.
I want to check the checkbox basic info when user fills up the last item of section 1, check checkbox contact details when contact details sections fill out and so on and also Next button color changes to green everytime last item is filled or selected.
Also I have general information section, when user moves to next section then content changes from basic info to contact details to select a course in third section.
脚本
$('.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被充斥时都可以调用该功能. .因此，当您在此处编辑任何输入时，它将检查验证是否正常，如果正常，则将选中复选框.您需要一个data-name属性，该属性的ID与复选框相同.我在 codepen 上写了它，而且看起来工作正常.
You can create a new function for checking checkbox, so it can be called with on every time new section form-control is blured. so when you edit any input there, it will check if validation is ok or not , and if it's ok then checkbox would be checked.you need a data-name attribute which is same id as its checkbox. i wrote it on codepen and seems it works fine.
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);
} }) ;
这篇关于如何在MVC中单击按钮时选中复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
