Firefox ESR 102复选框change事件失效，求跨版本兼容方案

复选框勾选功能在Firefox ESR 68.4.2及Google Chrome中正常运行，但在Firefox ESR 102中无法正常工作——绑定的change事件方法未被调用。现有代码如下：

$(document).on('change', '#specialNote', function (e) {
    var value = "N";
    if ($(this).is(':checked')) {
        value = "Y";
    }
    productEvent.updateSpecialNote($('#eventId').val(), value);
});

兼容解决方案 #

方案1：用click事件兜底（最稳妥） #

Firefox ESR 102对部分场景下的change事件触发逻辑有调整，click事件在各浏览器中对复选框的触发更稳定。同时绑定两种事件并做去重处理：

$(document).on('change click', '#specialNote', function (e) {
    // 避免同一操作重复执行
    if (e.type === 'click' && this.checked === $(this).is(':checked')) {
        return;
    }
    var value = this.checked ? "Y" : "N";
    productEvent.updateSpecialNote($('#eventId').val(), value);
});

这里改用原生this.checked判断状态，比jQuery选择器更高效且兼容更稳定。

方案2：修复自定义样式复选框的事件触发 #

如果你的复选框是通过CSS隐藏原生控件、用伪元素模拟外观的，Firefox ESR 102可能无法正确触发原生change事件。需要给模拟元素绑定点击事件，手动触发原生复选框的状态变更和事件：
假设DOM结构如下：

<label for="specialNote">
    <input type="checkbox" id="specialNote" style="display:none;">
    <span class="custom-checkbox"></span>
</label>

对应的兼容代码：

// 点击自定义样式时同步原生复选框状态并触发事件
$(document).on('click', '.custom-checkbox', function () {
    var $checkbox = $(this).prev('#specialNote');
    $checkbox.prop('checked', !$checkbox.prop('checked')).trigger('change');
});

// 保留原业务逻辑
$(document).on('change', '#specialNote', function (e) {
    var value = this.checked ? "Y" : "N";
    productEvent.updateSpecialNote($('#eventId').val(), value);
});

方案3：替换状态判断方式 #

原代码中$(this).is(':checked')在部分Firefox版本中可能存在状态延迟，改用prop方法判断更可靠：

$(document).on('change', '#specialNote', function (e) {
    var value = $(this).prop('checked') ? "Y" : "N";
    productEvent.updateSpecialNote($('#eventId').val(), value);
});

内容的提问来源于stack exchange，提问作者Dulani Maheshi