jQuery将disabled改为readonly后仅单个输入框生效问题咨询

可能性1：浏览器缓存未清理 #

你修改JS代码后没有强制刷新页面，浏览器仍然加载了旧版本的JS逻辑，导致设置payername、panelname为readonly的代码没有实际执行。

排查方案：按Ctrl+F5强制刷新页面，或者打开浏览器开发者工具勾选「禁用缓存」后重新测试。

可能性2：页面存在重复ID #

HTML规范要求同一个页面内ID唯一，如果页面中存在其他ID为payername、panelname的元素，jQuery的ID选择器只会匹配第一个找到的元素，导致你需要修改的目标输入框没有被设置readonly属性。

排查方案：打开浏览器控制台，分别执行以下代码，确认返回值均为1：

console.log($('#payername').length)
console.log($('#panelname').length)

如果返回值大于1，说明存在重复ID，需要修改重复的ID保证唯一。

可能性3：其他JS逻辑覆盖了属性设置 #

如果项目中存在其他监听billingtype下拉框变化的代码，会在你这段readonly设置代码执行完成后，主动把payername、panelname的readonly属性改回false，导致你写的逻辑被覆盖。

排查方案：在你这段设置readonly的代码末尾添加打印语句，验证执行完你的代码时三个输入框的readonly状态是否正确：

console.log(
  'payername只读：', $('#payername').prop('readonly'),
  'icpayer只读：', $('#icpayer').prop('readonly'),
  'panelname只读：', $('#panelname').prop('readonly')
)

如果打印结果三个均为true，但页面上输入框仍可编辑，说明存在其他后续逻辑修改了属性，需要排查其他关联JS代码。

可能性4：ID拼写不匹配 #

检查JS中选择器的ID拼写和HTML输入框的ID拼写是否完全一致，区分大小写，比如有没有把payername误写为payerName、panelname误写为panelName，大小写不一致会导致jQuery选择器找不到对应元素。

临时修复方案 #

你可以在现有代码基础上，增加属性优先级设置，同时清理旧的disabled属性，避免旧逻辑干扰：

if( $(this).val() == 'cash') {
    // 先清理disabled属性
    $('#payername,#icpayer,#panelname').prop('disabled', false);
    // 统一设置readonly
    $('#payername').prop( "readonly", true );
    $('#icpayer').prop( "readonly", true );
    $('#panelname').prop( "readonly", true );
}else {       
    $('#payername').prop( "readonly", false );
    $('#icpayer').prop( "readonly", false );
    $('#panelname').prop( "readonly", false );
}

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