复选框列表验证失败，因为复选框列表的长度始终为零

Posted 2023-05-09

【中文标题】复选框列表验证失败，因为复选框列表的长度始终为零

【英文标题】：Checkboxlist validation failing because length of list of checkboxes is always zero

【发布时间】：2014-07-28 23:25:53

【问题描述】：

我有一个复选框列表，我正在尝试对其进行验证，以便用户至少选择一个复选框。对于这个复选框列表，我正在绑定数据库中的值。此列表是部分视图。

<div class="options" data-bind="foreach: User,
                                visible: true" style="display: none;">
  <input type="checkbox" 
         id="chk" 
         class='roles' 
         name='roles' 
         data-bind="attr:  value: Id , 
                    checked:MyViewModel.MyData.UserCheckedValues" />
  <span data-bind="text: Name"></span>
</div>

这是我尝试验证它的代码：

   if ($('#chk input:checked').length > 0) 
        return true;
    
    else 
        alert('Please select atleast one technology')
        return false;
    

但是，即使我选择了复选框，每次我得到长度 0 时也是如此。如何验证此复选框列表？

【问题讨论】：

您正在寻找客户端验证，是吗？或者是否跳过客户端验证并使用服务器端验证执行此操作也是一种选择？

【参考方案1】：

您对 jQuery 的那一点问题可能是因为您指定了 id 属性。但是，该属性必须是唯一的（毕竟它是一个 id），并且您在 foreach 中呈现复选框，因此多个元素将具有 id="chk"，这可能会导致各种问题。除此之外，您似乎在 chk 元素中选择了 inputs。解决这个问题可能会让您完成当前的方法。请参阅the answer by @Origineil 了解解决此问题的方法。

---

为了提供替代方案，IMO 使用 Knockout 的 MVVM 特性来解决您遇到的问题的更好方法。在您的视图模型上实现有效性。 Knockout-Validation plugin 可能会有所帮助，但如果您想自己实现它，对于简单的情况应该不会太难。

你没有提供full repro，所以我需要对你的视图模型代码做一些假设。这是我想你的情况应该是什么样子（带有一些存根）：

var ViewModel = function() 
    var self = this;

    self.users = ko.observableArray([
         Id: 1, Name: 'Rita' ,
         Id: 2, Name: 'Marcus' ,
         Id: 3, Name: 'Fido' 
    ]);

    self.selectedUsers = ko.observableArray();

    self.isUserSelectionInvalid = ko.computed(function() 
        return self.selectedUsers().length === 0;
    );
;

这使得有效性成为视图模型的适当部分。然后，您可以在您的视图中绑定到它，还可以在the submit binding 的逻辑中使用有效性属性。例如：

<div data-bind="foreach: users, visible: true">
    <input type="checkbox" 
           id="chk" 
           class='roles'  
           name='roles'  
           data-bind="attr:  value: Id , checked: $parent.selectedUsers" /> 
    <span data-bind="text: Name"></span>
</div>
<span data-bind="visible: isUserSelectionInvalid" style="color: red;">Select at least one user</span>
<br />
<button data-bind="disable: isUserSelectionInvalid">Submit</button>

在this fiddle 中查看所有这些操作。

【参考方案2】：

我更喜欢使用UserCheckedValues。 我对 asp-mvc 的语法不够熟悉，无法提供该部分。

---

但如果你坚持：$('input:checkbox[id="chk"]:checked') 会起作用。

您真的希望复选框具有相同的 id 吗？我也会改变它。

<input type="checkbox" class='roles' name='roles' data-bind="value: Id, checked:MyViewModel.MyData.UserCheckedValues, attr:id: 'chk' + $index() " />

然后选择器需要匹配“开始于”：

$('input:checkbox[id^="chk"]:checked') 

【参考方案3】：

在控制器中验证，

   [HttpPost]
    public string Index(IEnumerable<model> modelinstance)
   
   if (modelinstance.Count(x => x.IsSelected) == 0)
    
    return "You have not selected any City";
    
    else
    
    StringBuilder sb = new StringBuilder();
    sb.Append("You selected - ");
    foreach (models model in modelinstance)
    
        if (model .IsSelected)
        
            sb.Append(model.Name + ", ");
        
    
    sb.Remove(sb.ToString().LastIndexOf(","), 1);
    return sb.ToString();
   
   

【讨论】：

验证服务器端也很好，但我认为 OP 的问题是关于客户端验证。

实际上我看不到任何说 OP 想要客户端验证的东西，他只是使用 JQuery 并不意味着他只想在客户端验证。如果您找到原因，则 OP 只需要客户端验证。告诉我我会删除这篇文章