Html 当标签顶部有隐藏字段时，是否可以通过单击标签来选中复选框？

我有一个带有复选框和隐藏输入的标签。 如果没有隐藏的输入，我可以点击标签来选中复选框，但是如果隐藏的输入在上面，我就不能（除了在Chrome上）

在不移动隐藏输入的情况下，是否仍存在此问题（隐藏输入必须位于标签内部和复选框顶部）

我的JsBin：

为什么隐藏字段必须位于标签内部和复选框顶部至关重要？

这是因为我使用的是CakePHP的表单助手

输入选项

$checkbox_options = array(
    'label'       => false,
    'div'         => false,
    'type'        => 'checkbox',
    'class'       => false,
    'hiddenField' => true
);

表格：

我的标签在这里

上述表格将输出：

<div class="checkbox">
    <label>
        <input name="data[FakeModel][field]" value="0" type="hidden">
        <input name="data[FakeModel][field]" value="1" checked="checked" type="checkbox">
        My Label Here
    </label>
</div>

我的标签在这里

---

如果有一种方法可以使用CakePhp的form helper将隐藏的输入移动到复选框下方，那就太好了！但不幸的是，我认为这是不可能的，我浏览了文档，却找不到办法。

哇，真是太棒了。它在Firefox上工作

$checkbox_options = array(
    'label'       => 'My level here',
    'div'         => false,
    'type'        => 'checkbox',
    'class'       => false,
    'hiddenField' => true
);

$checkbox_options = array(
    'label'       => 'My level here',
    'div'         => false,
    'type'        => 'checkbox',
    'class'       => false,
    'hiddenField' => true
);