个人中心
gpt4 book ai didi

jquery - 至少选中一个复选框 - Asp.Net MVC - jQuery

转载 作者：行者123 更新时间：2023-11-27 23:52:01 26 4
gpt4 key购买 nike

我想使用“@Html.ValidationMessageFor”在客户端验证表单。它对文本框工作正常。我在表单中也有一些复选框。我想使用相同的方式来验证是否至少选中了一个复选框。但是如果我没记错的话，jquery 验证插件使用复选框的名称来知道是否至少选择了一个(例如:http://jqueryvalidation.org/files/demo/radio-checkbox-select-demo.html):

<html>
    <head>
        <script src="http://jqueryvalidation.org/files/lib/jquery-1.11.1.js"></script>
        <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"> </script>
        <script>
            $(document).ready(function() {
                $("#form1").validate({
                    rules:{
                        spamName: {
                            required: true,
                        },
                    },
                    messages:{
                        spamName:{
                        required: "This is my custom message",
                        },
                    }
                });
            });
        </script>
        <style>
            .block {
                display: block;
            }
            form.cmxform label.error {
                display: none;
            }
        </style>
        <title></title>
    </head>
    <body>
        <form class="cmxform" id="form1" method="get" action="">
            <fieldset>
                <legend>Spam</legend>
                <label for="spam_email">
                <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spamName" required>Spam via E-Mail
    </label>
                <label for="spam_phone">
                    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spamName">Spam via Phone
    </label>
                <label for="spam_mail">
                    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spamName">Spam via Mail
    </label>
                <label for="spamName" class="error">This field is required custom message.</label>
            </fieldset>
            <p>
                <input class="submit" type="submit" value="Submit">
            </p>
        </form>
    </body>
</html>

因此复选框应按组具有相同的名称。

这意味着在提交表单后将无法检索选择了哪些值，因为该名称用于通过在名称中添加索引属性 (http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx) 将 html 表单绑定(bind)到模型。

有人知道或有绕过这个问题的解决方案吗？

代码示例是:

public class Mandatory
{
    public Mandatory()
    {
        CheckboxItems = new List<CheckboxItem>();
    }

    public IList<CheckboxItem> CheckboxItems { get; set; }
}
public class CheckboxItem
{
    public bool CheckboxValue { get; set; }

    public string Name { get; set; } 
}

在 View 中:

@model WebApplication20.Models.Mandatory
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.ValidationMessageFor(model => model.CheckboxItems)
    @Html.EditorFor(model => model.CheckboxItems)
    <input type="submit" value="Submit" id="submit">
}

使用的编辑器模板:

@model WebApplication20.Models.CheckboxItem
<div class="form_row">
    @Html.HiddenFor(x => x.Name, Model.Name)
    <label for="@Model.CheckboxValue"></label>
    <span class="content-checkbox">
        @Html.CheckBoxFor(x => x.CheckboxValue)
        @Html.LabelFor(x => x.CheckboxValue, Model.Name)
    </span>
</div>

最后在家庭 Controller 中:

public ActionResult Index()
{
    var items = new Mandatory();
    items.CheckboxItems.Add(new CheckboxItem
    {
        CheckboxValue = true, 
        Name = "test 1",
    });

    items.CheckboxItems.Add(new CheckboxItem
    {
        CheckboxValue = false,
        Name = "test 2",
    });

    items.CheckboxItems.Add(new CheckboxItem
    {
        CheckboxValue = true,
        Name = "test 3",
    });

    return View(items);
}

[HttpPost]
public ActionResult Index(Mandatory test)
{
    return RedirectToAction("Index");
}

谢谢!

最佳答案

我实现的解决方案:

  • 在模型中添加一个额外的字符串属性(在我的示例中为 Mandatory 类)，具有“必需”属性
  • 将此属性显示为隐藏字段
  • 在所有复选框上实现 onchange jquery 事件。在这种情况下，我会检查是否至少选中了一个复选框。
  • 如果至少选中一个复选框，我将填充显示为隐藏字段的新属性的值。否则，我将删除此隐藏字段的值。
  • 然后我在隐藏字段上调用“有效”方法以自动显示或删除错误消息。

由于用于验证的字段是隐藏的(一个通过复选框组)，需要修改默认的 jquery 验证行为:

jQuery.validator.setDefaults({
        ignore: ""
    });

关于jquery - 至少选中一个复选框 - Asp.Net MVC - jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26596888/

26 4 0
文章推荐： html - 高度为 100% 的 float 元素
文章推荐： html - 使用 float 项的 CSS 网格
文章推荐： html - 输入字段下的 Div
文章推荐： html - 在 CSS 中创建一个饮用 jar /瓶对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com