Javascript 需要限制用户选中每个内部表中的连续复选框

我有一个表（id='MainTable'），其中显示可用性记录，在主表中有一个带有可用时间复选框的表。内部表格中的复选框数量不同，表格中的每条记录将有1个或多个复选框。e、 g第一行的内表可以有5个复选框，第二行可以有3个复选框，以此类推

用户可以勾选内部表格特定行的1个或多个复选框，但可以按顺序/连续勾选，以预订评估员超过1小时

例如，在第一行中，用户可以选择带有“08:00 AM-09:00 AM”和“09:00 AM-10:00 AM”的复选框来设置2小时，但不能选择“08:00 AM-09:00 AM”和“12:00 PM-01:00 PM”来设置2小时，因为它们不是连续的复选框

例如，在第二行中，用户可以选择带有“09:30 AM-10:30 AM”和“10:30 AM-11:30 AM”的复选框来设置2小时，但不能选择“09:30 AM-10:30 AM”和“05:00 PM-06:00 PM”来设置2小时，因为它们不是连续的复选框

我对内表有不同的id

我只提供内部表的HTML：

<table width="100%" border="0" id="Tab_13322918">
<tbody>
    <tr>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="08:00 AM - 09:00 AM"> 08:00 AM - 09:00 AM
        </td>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="09:00 AM - 10:00 AM"> 09:00 AM - 10:00 AM
        </td>
    </tr>
    <tr>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="12:00 PM - 01:00 PM"> 12:00 PM - 01:00 PM
        </td>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="01:00 PM - 02:00 PM"> 01:00 PM - 02:00 PM
        </td>
    </tr>
    <tr>
        <td style="font-size:10px;color:brown">
            <input type="checkbox" value="02:00 PM - 03:00 PM"> 02:00 PM - 03:00 PM
        </td>
    </tr>
</tbody>

上午8:00-上午9:00
上午9:00-10:00
下午12:00-01:00
下午01:00-02:00
下午02:00-03:00

---

您始终可以获取复选框组中第一个和最后一个选中复选框的索引，并确保当前选中的复选框位于位置

lastIndex+1

或

firstIndex-1

请注意，我使用事件委派来避免将侦听器添加到每个复选框中，但是如果表中有其他复选框，则必须找到只针对正确复选框的方法。您可以向所有相关复选框添加additionnal类，并相应地修改委托选择器

$('#your-table').on('click', '[type=checkbox]', function (e) {
    var $el = $(e.currentTarget),
        $checkboxes = $el.closest('table').find('[type=checkbox]'),
        $checkedEls = $checkboxes.filter(':checked').filter(function (index, el) {
            return el !== $el[0];
        }),
        elIndex = $checkboxes.index($el),
        firstCheckedIndex = $checkboxes.index($checkedEls.first()),
        lastCheckedIndex = $checkboxes.index($checkedEls.last());

    return !$checkedEls.length
        || (elIndex === firstCheckedIndex - 1 || elIndex === lastCheckedIndex + 1);
});

编辑：

---

在您的解决方案中，我可以选择“上午09:00-上午10:00”和“下午12:00”-

---

下午1:00“我不想要。我指的是连续的复选框 连续的时间，中间没有间隔

---

首先，非常感谢plalx，他提供了一个几乎完美的答案！然而，为了使他的脚本最终运行，需要进行一些修改

我还自由地提出了一种稍微不同的处理检查结果的方法。在我的版本中，我只需通过单击处理程序设置从第一个到最后一个的所有复选框

：checked

到

prop（'checked'，true）

，因此无论用户在何处单击，始终会选择一个连续的范围：

$('table[id^=Tab]').on('click', ':checkbox', function (e) {
    var $el   =$(e.currentTarget), // $(this) would also work here ...
        allcb =$el.closest('table').find(':checkbox'),
        firstc=allcb.index(allcb.filter(':checked:first')),
        lastc =allcb.index(allcb.filter(':checked:last'));  
        allcb.slice(firstc,lastc+1).prop('checked',true);
});

请随意使用和修改我的。 读了你的问题，我不太确定到底允许有多少个连续的复选标记。我的版本没有对这一点进行限制，但是，当然，也可以引入这一点

编辑：

根据OP的要求，这里有一个更严格的解决方案：

$('table[id^=Tab]').on('click', ':checkbox', function (e) {
    var $el   =$(e.currentTarget),
        allcb =$el.closest('table').find(':checkbox'),
        firstc=allcb.index(allcb.filter(':checked:first')),
        lastc =allcb.index(allcb.filter(':checked:last'));
    return (lastc-firstc==0) || 
           (allcb.slice(firstc,lastc+1).filter(':checked').length>(lastc-firstc)); 
});

通过在事件处理程序中返回

false

，只需忽略单击会导致复选框序列中断的复选框

---

连续复选框指的是连续的时间，中间没有间隔。我终于有时间纠正我的第一个解决方案，并添加了一个基于时间值的示例。在您的解决方案中，我可以选择“09:00 AM-10:00 AM”和“12:00 PM-01:00 PM”，这是我不想要的。“连续复选框”指的是连续的时间，中间没有间隔。@AsifAkhtar我已根据您的需要更新了我的答案，并修复了我前面示例中的代码。这就是我想要的。谢谢，非常感谢。

$('table[id^=Tab]').on('click', ':checkbox', function (e) {
    var $el   =$(e.currentTarget),
        allcb =$el.closest('table').find(':checkbox'),
        firstc=allcb.index(allcb.filter(':checked:first')),
        lastc =allcb.index(allcb.filter(':checked:last'));
    return (lastc-firstc==0) || 
           (allcb.slice(firstc,lastc+1).filter(':checked').length>(lastc-firstc)); 
});