Chrome 105.0.5195.102更新致PHP YII应用JS功能异常求助

不少开发者都遇到过谷歌浏览器近期紧急安全更新后，Yii项目里的JS逻辑出现兼容性问题，你的情况大概率和选择器行为变化或表单提交的逻辑冲突有关。

问题代码分析 #

你提供的函数里存在两个关键问题：

1. 选择器失效：closest(':has("form")')这种写法在新版Chrome中，因为DOM遍历规则的调整，可能无法正确定位到包含表单的父元素，导致elForm获取不到有效表单对象，自然无法触发提交。
2. 提交时机错误：Yii的afterValidate是异步验证回调，你在禁用按钮后立刻调用elForm.submit()，要么会跳过验证直接触发提交（但可能因为按钮被禁用，被Yii内置逻辑拦截），要么验证还未完成就执行了提交，导致异常。

修复方案 #

1. 简化选择器，确保正确获取表单

直接用closest('form')定位按钮所在的表单，比:has伪类更可靠：

let elForm = elButton.closest('form:visible');

2. 调整提交逻辑，结合Yii验证流程

不要直接触发提交，而是先触发Yii的表单验证，在验证通过后再提交表单，同时用prop代替attr设置按钮禁用状态（jQuery操作DOM属性更推荐用prop）：

function disableButton(elButton) {
    let elForm = elButton.closest('form:visible');
    
    // 绑定验证完成后的回调
    elForm.on('afterValidate', function(e) {
        let errors = elForm.find('.has-error').length;
        if (errors > 0) {
            // 有错误时恢复按钮可用状态
            elButton.prop('disabled', false);
        } else {
            // 验证通过，提交表单
            elForm.submit();
        }
        // 解绑回调，避免重复触发
        elForm.off('afterValidate');
    });
    
    // 禁用按钮
    elButton.prop('disabled', true);
    // 触发Yii的表单验证
    elForm.yiiActiveForm('validate');
}

额外说明 #

如果上述调整后仍有问题，可检查浏览器控制台是否有报错，大概率是某个选择器或DOM操作在新版浏览器中被限制，比如谷歌安全更新可能加强了对DOM遍历的权限限制，避免不必要的父元素查找，尽量直接定位目标元素。

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