Question

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

<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。如何验证此复选框列表？

Answer 1

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

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

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

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

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

<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中查看所有这些内容。

Answer 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')

Answer 3

在Controller中验证，

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

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

3 个答案: