Question

我有一个表（id ='MainTable'），我在其中显示可用性记录，在主表中我有一个表格，其中包含可用时间的复选框。内表中的复选框的编号不同，表中的每个记录都有1个或多个复选框。例如，第一行的内表可以有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>

enter image description here

Answer 1

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

JSFIDDLE

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

$('#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 AM - 10:00 AM”和“12:00 PM - 01:00 PM“我不想要。我的意思是连续复选框连续两次，没有间隙。

JSFIDDLE

$('#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];
        }),
        timeParts = $el.val().split(' - ');

    return !$checkedEls.length
        || (
            timeParts[1] === $checkedEls.first().val().split(' - ')[0] 
            || timeParts[0] === $checkedEls.last().val().split(' - ')[1]
        );
});

Answer 2

首先，非常感谢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);
});

随意使用并修改我的JSfiddle。我不太确定是否已经阅读了实际允许多少连续复选标记的问题。我的版本没有强制限制，但是，当然也可以引入。

修改：

根据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，可以忽略单击复选框，这些复选框将导致复选框序列被中断。

http://jsfiddle.net/HzGF5/6/

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

2 个答案: