在 Repeater 中设置每个 CheckBoxList 选择的最大值

Set maximum selected per CheckBoxList in Repeater

我在 Repeater:

中有一个动态 CheckBoxList
<asp:Repeater ID="rpt1" runat="server" OnItemDataBound="rpt1_ItemDataBound">
  <ItemTemplate>
    <asp:HiddenField ID="hf1" runat="server" Value='<%# Eval("Id") %>' />
    <asp:TextBox ID="txt" runat="server" Text='<%# Eval("Question") %>'></asp:TextBox>
    <asp:CheckBoxList ID="chk1" runat="server" Width="100%" RepeatColumns="3" RepeatLayout="Table" RepeatDirection="Horizontal></asp:CheckBoxList>
  </ItemTemplate>
</asp:Repeater>

我希望用户只 choose/select 3 个项目。我尝试了很多解决方案,包括这个:

var limit = 10;
$(function () {
    $('[id*="chk1"]').on('change', function (evt) {
        if ($('[id*="chk1"]:checked').length > limit) {
            this.checked = false;
            alert('You can only choose ' + limit);
        }
    });
});

它确实有效,但如果 Repeater 生成了多个 CheckBoxList,如果我 select 另一个 CheckBoxList 中的另一个项目,则限制仍然有效。

这意味着如果我在 CheckBoxList 第一选择 8 个项目,那么我只能在 CheckBoxList 第二选择 2 个项目,但目标是限制 select 个项目每个 CheckBoxList.

到 10

有什么解决办法吗?

$('[id*="chk1"]:checked')更改为:

$(this).parent().closest('[id*=rpt1]').find('[id*="chk1"]:checked')

测试对象:

<table id="MainContent_rpt1_chk1_0">
  <tbody>
    <tr>
      <td>
        <input id="MainContent_rpt1_chk1_0_0_0" type="checkbox" />
      </td>
      <td>
        <input id="MainContent_rpt1_chk1_0_1_0" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>
<table id="MainContent_rpt1_chk1_1">
  <tbody>
    <tr>
      <td>
        <input id="MainContent_rpt1_chk1_0_0_0" type="checkbox" />
      </td>
      <td>
        <input id="MainContent_rpt1_chk1_0_1_0" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>