Question

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.

Answer 1

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   
           }
       });
});