由父表格单元控制的复选框

Question

我有一个表格，在这个表格中有一个完全是复选框的列。该表格将在移动设备上可见，因此如果复选框易于使用，那就太好了。所以我试图弄清楚如何让表格单元格父级 td 控制复选框的检查。所以用户实际上并没有点击复选框本身，而是点击了表格单元格。为此，我为 td 设置了一个 onclick 函数，它检查或取消选中相应的复选框。只要用户不单击复选框本身，它就可以正常工作。如果发生这种情况，则该框会检查自身，然后取消检查自身，因为它遵循通常的操作，然后调用自定义侦听器。我试图将复选框设置为禁用，但在 Chrome 中运行时会出现一个巨大的禁止（禁止吸烟）符号。那么有没有办法让复选框整体处于启用状态但禁用它的检查功能？

编辑：

我尝试使用更高的 z-index，但它根本不喜欢这样。代码如下所示：

<td style="text-align:center; width: 20%;">
        <div id="checkboxCell{{:#index}}"  onclick="PageConfigHome.toggleCheckboxes({{:#index}});" style="position:absolute; z-index: 999;">
            <input type="checkbox" style="z-index: 1" onclick="PageConfigHome.toggleCheckBoxes(null);" id="checkbox{{:#index}}" class="HomeScreenCheckbox"/>
        </div>
    </td>

解决方案： 我发现这篇文章解决了我的问题：Tick a checkbox in a table cell by clicking anywhere in the table cell

Answer 1

您是否尝试过将event 传递给点击事件并使用event.stopPropagation(); 来防止事件冒泡？见this

Answer 2

在同一个单元格中放置一个绝对定位的 DIV，具有更高的 z-index。而是将点击事件放在 DIV 上。