Question

我有一个表单，使用一个编辑器模板，显示一系列与表单模型中的子列表相关的复选框。在表单提交时，我需要检查是否检查了所有子项目的所有复选框，如果没有显示模式对话框，以确保用户故意决定不选中某些复选框。我知道我可以使用JQuery对话框来显示模态对话框，但我不知道如何查看编辑器模板中的所有复选框是否都已选中。我的代码类似于以下内容：

<%@ 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>

和编辑器模板：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Test.Models.ColumnList>" %>

<tr>
  <td>
    <%= Html.CheckBoxFor(x => x.value) %>
  </td>
</tr>

非常感谢任何帮助，谢谢。

Answer 1

为您要验证的复选框添加一个CSS类编辑器模板

<%= Html.CheckBoxFor(x => x.value, new { @class = "chk" }) %>

然后您可以使用jQuery :checked和:checkbox选择器进行size()比较。

if ($('input.chk:checkbox').size() == $('input.chk:checked')) {

}

Answer 2

在您的复选框中添加一个类，例如

<%= Html.CheckBoxFor(x => x.value,new{@class="chk"}) %>

然后在提交事件

上使用jquery挂钩

$("#form").live('submit', function(e){
      $(".chk").each(function(){
           if($(this).attr("checked") == false)
           {
              //show modal dialogue here   
           }
       });
});

如何检查编辑器模板中的所有复选框是否都已选中

2 个答案: