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

Question

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

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

它工作得很好，除了一件事：
1.进入页面（A和B默认不勾选）
2.现在点击A：action会被正确拒绝，因为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 调用选中关联的复选框。

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

Javascript: Problems in firefox with checkbox + label + preventDefault

javascript

checkbox

onclick

preventdefault