Question

如果所选项目为5，我将如何禁用其余复选框？我在想，有可能在jquery中做到这一点。以下是我的代码。

<table>
@{ var i = 0;}
@foreach (var testimonials in Model.Testimonials)
{
<tr>
    <td style="padding: 2px 0 2px 2px;">
        @Html.CheckBox("Testimonials[" + i.ToString() + "].DisplayTestimonials", testimonials.DisplayTestimonials.Value, new { @class = "chkItems" })
        @Html.Hidden("Testimonials[" + i.ToString() + "].ResponseId", testimonials.ResponseId.ToString())
    </td>
    <td style="padding: 2px 0 2px 2px;">@Html.TextBox("Testimonials[" + i.ToString() + "].FirstName", testimonials.FirstName, new { @readonly = "readonly", @class = "TextBoxAsLabel" })</td>
    <td style="padding: 2px 0 2px 2px;">@Html.TextBox("Testimonials[" + i.ToString() + "].LastName", testimonials.LastName, new { @readonly = "readonly", @class = "TextBoxAsLabel" })</td>
    <td style="padding: 2px 0 2px 2px;">@Html.TextBox("Testimonials[" + i.ToString() + "].Question5Answer", testimonials.Question5Answer.ToString(), new { @readonly = "readonly", @class = "TextBoxAsLabel" })</td>
</tr>
                                   i++;
}

解决方案：

<script type="text/javascript">
$(document).ready(function () {
    function countchecked() {
        var n = $("input:checked").length;
        if (n >= 5)
            $('.chkItems:not(:checked)').attr("disabled", "disabled");
        else
            $('.chkItems:not(:checked)').removeAttr("disabled");
    }
    $(":checkbox").click(countchecked);
});

Answer 1

以下是一个示例（根据建议进行了改进）。您可能希望优化选择器。

<script type="text/javascript">
    jQuery(function() {
        jQuery("input:checkbox.chkItems").change(
            function() {
                var p = $(this).parent();
                var e = p.find("input:checked").length >= 5;
                p.find("input:not(:checked)").attr('disabled', e ? 'disabled' : '');
            }
        );
    });
</script>

<div id="checkbox-group">
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
    <input type="checkbox" class="chkItems" />
</div>

Answer 2

以下是我提出的解决方案：

 var checkedcount=0;
  $("input.chkItems").change(function(){
    if(this.checked) checkedcount++; else checkedcount--;
    if(checkedcount>=5)  $("input.chkItems:not(:checked)").attr("disabled", "disabled");
    else $("input.chkItems:not(:checked)").removeAttr("disabled");
  });

工作演示：http://jsbin.com/etici4

EDITED：按照建议将事件更改为“onchange”

Answer 3

只是想一个数组来跟踪复选框的数量，例如enabled = false if（array.length == 5＆amp;＆amp; self！= checked）

如果你写一点javascript可能会有用我对jQuery不太熟悉，说是否有一些简单的内置方法来做到这一点

一旦所选项为5，jquery将禁用复选框

3 个答案: