2015-12-08 83 views
0

我在我的asp.net mvc剃刀视图中生成一个复选框列表中的以下部分。 我希望能够验证至少有一个被打勾。检查至少一个复选框检查jquery验证

<div class="form-group"> 
    <div class="row col-md-12 "> 
    <div class=" col-md-11 col-md-offset-1"> 
     @for (int i = 0; i < Model.PeronsExpList.Count(); i++) 
     { 
     <div class="col-md-12"> 
      @Html.HiddenFor(x => Model.PeronsExpList[i].PeronExpId) 
      @Html.CheckBoxFor(x => Model.PeronsExpList[i].selected, new { @class = "{peopleExp: true}", @name = "peopleExp"}) 
      @Html.DisplayFor(x => Model.PeronsExpList[i].PeronName, Model.PeronsExpList[i].PeronName) 
     </div> 
     } 
    </div> 
    </div> 
</div> 

我有以下的JavaScript来提供此功能:

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script type="text/javascript"> 

    $.validator.addMethod("peopleExp", function (value, elem, param) { 
    if ($(".peopleExp:checkbox:checked").length > 0) { 
     return true; 
    } else { 
     return false; 
    } 
    }, "You must select at least one!"); 

    </script> 
} 

然而,当我测试它,它让我提交即使没有被选中TE页。

+1

http:// js fiddle.net/chriscoyier/bphze/76/ – Jinandra

+0

该链接仅仅是IE和Chrome浏览器页面上对象的混乱 –

+0

您可能需要重新加载页面。在两端浏览器上都能正常工作。 – Jinandra

回答

0

感谢@AmitSingh用于链接的资源来解决这个

查看修改为:

 <div class="form-group"> 
     <div class="row col-md-12 "> 
      <div class=" col-md-11 col-md-offset-1"> 
       @for (int i = 0; i < Model.PeronsExpList.Count(); i++) 
       { 
        <div class="col-md-12"> 
         @Html.HiddenFor(x => Model.PeronsExpList[i].PeronExpId) 
         @Html.CheckBoxFor(x => Model.PeronsExpList[i].selected, new { @type = "checkbox"}) 
         @Html.DisplayFor(x => Model.PeronsExpList[i].PeronName, Model.PeronsExpList[i].PeronName) 
        </div> 
       } 
      </div> 
     </div> 
    </div> 

萨米特按钮改为:

<input type="submit" name="Submit" value="Add Control Measure" class="btn btn-primary" disabled /> 

的Javascript修改为:

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
<script type="text/javascript"> 

    var checkboxes = $("input[type='checkbox']"), 
     submitButt = $("input[type='submit']"); 

    checkboxes.click(function() { 
     submitButt.attr("disabled", !checkboxes.is(":checked")); 
    }) 
</script> 
} 
相关问题