使用jQuery实现下拉框切换及页面加载时修改文本输入框状态

核心问题解决 #

1. 禁用字段无法提交：用readonly替代disabled，readonly状态下用户无法编辑输入框，但表单提交时会正常携带字段值
2. 代码冗余与初始化缺失：提取统一处理函数，同时实现页面加载时的状态初始化和下拉框变更时的联动逻辑，简化代码结构

优化后的完整代码 #

JavaScript 代码

// 定义统一处理函数，接收下拉框元素作为参数
function handleIconSelect(selectElement) {
  const $select = $(selectElement);
  const selectVal = $select.val();
  // 定位当前下拉框所属的表单模块，避免全局DOM查询（根据实际HTML结构调整父容器选择器）
  const $formModule = $select.closest('.card');
  const $iconPreview = $formModule.find('.icon_example');
  const $inputFields = $formModule.find('.form-control');

  // 更新图标预览地址
  $iconPreview.attr('src', `https://weburl/images/writers/${selectVal}`);

  // 判断是否为需要锁定输入框的特殊选项
  const isSpecialOption = selectVal === 'share.png' || selectVal === 'not_active.png';

  if (isSpecialOption) {
    // 设置输入框为只读并赋值N/A
    $inputFields.prop('readonly', true).val('N/A');
  } else {
    // 解除只读状态并赋值为下拉框选中值
    $inputFields.prop('readonly', false).val(selectVal);
  }
}

// 页面初始化 + 事件绑定
$(function() {
  // 页面加载完成时，遍历所有下拉框执行初始化检查
  $('.icon_select').each(function() {
    handleIconSelect(this);
  });

  // 监听下拉框变更事件
  $('.icon_select').on('change', function() {
    handleIconSelect(this);
  });
});

关键优化说明

• DOM查询优化：通过closest()定位当前表单模块，后续操作都基于该模块内的元素，避免重复的siblings()/children()链式调用，提升代码可读性和执行效率
• 状态操作规范：用prop()操作readonly属性（jQuery中处理布尔类型表单属性的推荐方式），用val()设置输入框值（替代原attr('value')的DOM属性操作）
• 逻辑简化：合并特殊选项的判断条件，减少重复代码
• 初始化逻辑：通过each()遍历所有下拉框，页面加载时自动同步输入框状态，满足刷新页面后的场景需求

视觉样式补充（可选） #

如果需要让只读输入框保持类似禁用的视觉效果，可添加CSS：

input[readonly] {
  background-color: #e9ecef;
  cursor: not-allowed;
  border-color: #ced4da;
}

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