How to check if all checkboxes in an editor template is checked
I have a form using an editor template showing a series of checkboxes pertaining to a child list inside the form model. On form submit I need to check if all the checkboxes are checked for all child items and if not display a modal dialog to make sure that the user purposely decided to leave some of the checkboxes unchecked. I know that I can use the JQuery dialog to show the modal dialog, but I have no idea how to see if all the checkboxes in the editor templates are checked. My code is similar to the following:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Test.Models.ModelList>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
ShowPropReturn
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>ShowPropReturn</h2>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<% using (Html.BeginForm()) { %>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>ModelList</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.MyProperty1) %>
</div>
<div class="editor-field">
<%: Html.EditorFor(model => model.MyProperty1) %>
<%: Html.ValidationMessageFor(model => model.MyProperty1) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.MyProperty2) %>
</div>
开发者_高级运维<div class="editor-field">
<%: Html.EditorFor(model => model.MyProperty2) %>
<%: Html.ValidationMessageFor(model => model.MyProperty2) %>
</div>
<table>
<%: Html.EditorFor(model => model.MyProperty3) %>
</table>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
<div>
<%: Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>
and for the editor template:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Test.Models.ColumnList>" %>
<tr>
<td>
<%= Html.CheckBoxFor(x => x.value) %>
</td>
</tr>
Any help would really be appreciated, thanks.
Add a CSS class to you editor template for the checkboxes that you want to validate
<%= Html.CheckBoxFor(x => x.value, new { @class = "chk" }) %>
And then you can use the jQuery :checked and :checkbox selectors to do a size() comparison.
if ($('input.chk:checkbox').size() == $('input.chk:checked')) {
}
add a class to your checkboxes like
<%= Html.CheckBoxFor(x => x.value,new{@class="chk"}) %>
and then hook in using jquery on submit event
$("#form").live('submit', function(e){
$(".chk").each(function(){
if($(this).attr("checked") == false)
{
//show modal dialogue here
}
});
});
精彩评论