jQuery change事件移动端失效求助（桌面端运行正常）

看起来你遇到了一个典型的移动端jQuery表单事件兼容性问题——桌面端逻辑正常，但移动端选择下拉框后不仅字段被错误禁用，连console.log('SP 3')都没打印出来。我给你梳理几个针对性的解决方向：

核心问题分析&解决方案 #

1. 改用事件委托绑定change事件 #

很多移动端表单组件（尤其是动态渲染的下拉框），直接用$(selector).change()绑定事件会失效——因为页面加载完成时，下拉框元素可能还没被渲染出来。改用事件委托能确保事件被正确捕获：

把原来的：

jQuery('#form-field-select_location').change(function(){...})

替换成：

jQuery(document).on('change', '#form-field-select_location', function(){...})

这种方式会监听整个文档的change事件，只要匹配到目标选择器就触发逻辑，不管元素是何时生成的。

2. 用.prop()替代.attr()操作布尔属性 #

disabled、required这类属于布尔属性，用.attr()操作在移动端浏览器容易出现兼容性问题（比如属性设置不生效、状态切换异常）。jQuery官方推荐用.prop()直接操作DOM元素的原生属性：

• 禁用字段：jQuery('#xxx').prop("disabled", true)
• 取消禁用：jQuery('#xxx').prop("disabled", false)
• 设置必填：jQuery('#xxx').prop("required", true)
• 取消必填：jQuery('#xxx').prop("required", false)

3. 处理值的匹配误差 #

移动端下拉框的选项值可能存在前后空格，导致val() == 'Northwest Indiana Mobile'匹配失败。建议加上.trim()处理，同时新增日志确认实际选中值：

console.log('Selected value:', jQuery(this).val()); // 查看实际选中值
if(jQuery(this).val().trim() == 'Northwest Indiana Mobile') { ... }

这样你能在移动端控制台直接确认选中值是否和预期一致，避免因空格、大小写差异导致的逻辑不触发。

修改后的完整代码 #

<script>
jQuery(document).ready(function() {
    console.log('SP');
    // 初始化禁用字段
    jQuery('#form-field-field_d280ad3').prop("disabled", true);
    jQuery('#form-field-time_for_mobile').prop("disabled", true);

    // 事件委托绑定下拉框change事件
    jQuery(document).on('change', '#form-field-select_location', function(){
        console.log('SP 2');
        console.log('Selected value:', jQuery(this).val()); // 新增日志，确认选中值
        // 重置禁用状态
        jQuery('#form-field-field_d280ad3').prop("disabled", true);
        jQuery('#form-field-time_for_mobile').prop("disabled", true);

        if(jQuery(this).val().trim() == 'Northwest Indiana Mobile') {
            console.log('SP 3');
            jQuery('#form-field-time_for_mobile').prop("disabled", false);
            jQuery("#form-field-time_for_mobile").prop("required", true);
            jQuery("#form-field-field_d280ad3").prop("required", false);
            jQuery('#form-field-field_d280ad3').val('');
        } else {
            console.log('SP 4');
            jQuery('#form-field-field_d280ad3').prop("disabled", false);
            jQuery("#form-field-time_for_mobile").prop("required", false);
            jQuery("#form-field-field_d280ad3").prop("required", true);
            jQuery('#form-field-time_for_mobile').val('');
        }
    });
});
</script>

测试建议 #

打开Chrome的设备模拟功能（F12 -> 点击顶部设备图标），模拟移动端环境，查看控制台输出的Selected value，确认值匹配是否正确，同时检查字段的禁用/必填状态是否符合预期。

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