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

Question

我有一个表 (id='MainTable')，我在其中显示可用性记录，在主表中我有一个带有可用时间复选框的表。内表中的复选框数量会有所不同，并且表中的每条记录将有 1 个或 1 个以上的复选框。例如，第一行的内表可以有 5 个复选框，第二行可以有 3 个复选框，依此类推。

用户可以勾选内表特定行的 1 个或 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>

Answer 1

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

JSFIDDLE

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

$('#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);
});

编辑:

In your solution I can select "09:00 AM - 10:00 AM" and "12:00 PM - 01:00 PM" which I don't want. By consecutive checkboxes I mean consecutive times and no gap in between.

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]
        );
});