1

我有一个表（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>

在此处输入图像描述

4

2 回答 2

2

您始终可以获取复选框组中第一个和最后一个选中复选框的索引，并确保当前选中的复选框位于位置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]
        );
});
于 2013-08-20T17:32:30.777 回答
0

首先，非常感谢 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/

于 2013-08-21T05:57:09.000 回答