Javascript：Firefox中的问题与复选框+标签+ preventDefault

Question

我有两个隐藏的复选框，每个都链接到一个标签（每个标签的颜色反映了链接复选框的状态——css）。我这样做是出于造型原因；顺便说一句，使用纯复选框不会有问题。

现在背后有一些逻辑：
1. 只有勾选了复选框B，才能勾选复选框A；拒绝是通过在 onlick (~preventDefault) 中使用 return 语句完成的
2. 因此，如果 B 被取消选中，但 A 被选中，则 A 将自动取消选中（并且无法再次选中，直到再次选中 B）
3.勾选B时，会自动勾选A（但可以再次手动取消勾选，只要B保持勾选状态）

它工作得很好，除了一件事：
1.进入页面（A和B默认不勾选）
2.现在点击A：操作将被正确拒绝，因为B未选中
3.现在点击B：实际上A现在也应该被选中，但是提示'disabled'并且A保持未选中 - 错误

如果跳过第 2 步，就没有问题。

使用实际的 event.preventDefault 命令不会改变任何东西。

似乎在 Chrome 中运行良好。

<input type="checkbox" id="checkA" unchecked />
<label for="checkA" id="checkALabel" onclick="{
    const $ = x => document.getElementById(x);

    // Reject if user tries to check checkA although checkB is false
    if (!$('checkA').checked && !$('checkB').checked) {
        alert('rejected');
        return false;
    }
    return true;
}">[check a]</label>

<input type="checkbox" id="checkB" onchange="{
    const $ = x => document.getElementById(x);

    // If [checkB is true but checkA not checked] then check checkA
    // or if [checkB is false and checkA checked] then uncheck checkA
    if ($('checkA').checked ^ $('checkB').checked) {
        $('checkALabel').click();
        if (!$('checkA').checked) {
            alert('disabled')
        }
    }
}" unchecked />
<label for="checkB">[check b]</label>

https://jsfiddle.net/zncmgs4o/

Answer 1

如果您将$('checkALabel').click(); 替换为$('checkA').click();，那么它也可以在Firefox 中使用。

似乎 Firefox 阻止了标签上的程序化 .click 调用检查关联的复选框。