使用jQuery根据另一输入框值修改输入框背景色失败求助

嘿，我看你卡在修改输入框背景色这一步了——虽然能成功设置readonly属性，但背景色怎么都不生效对吧？咱们来揪出问题所在，快速解决它～

首先看你代码里的两个明显问题：

• 选择器写错了：你写的$('add_at_inv2_client')少了ID选择器的#，jQuery找不到目标元素，自然没法修改样式，得改成$('#add_at_inv2_client')
• 用错了方法：prop()是用来操作DOM元素的原生属性（比如readonly、disabled这类），而背景色是CSS样式属性，根本不属于prop()的管辖范围，得用专门的css()方法，或者更推荐的「类名控制样式」方案

给你两种可行的解决办法：

方法一：直接用css()修改样式 #

这是最直接的方式，适合简单的样式修改：

if(names[6] == "Yes") { 
  $('#add_at_inv2_client').val(names[3]); 
  // 正确设置背景色
  $('#add_at_inv2_client').css('background-color', '#fefefe'); 
  // 如果你需要设置只读，继续用prop没问题
  $('#add_at_inv2_client').prop('readonly', true);
}

方法二：用CSS类控制样式（更推荐） #

把样式和JS逻辑分离，后续修改样式更方便，也更符合前端最佳实践：
先在CSS里定义好样式类：

.custom-readonly-bg {
  background-color: #fefefe;
  /* 还可以加其他相关样式，比如光标样式 */
  cursor: not-allowed;
}

然后在JS里添加/移除这个类：

if(names[6] == "Yes") { 
  $('#add_at_inv2_client')
    .val(names[3])
    .prop('readonly', true)
    .addClass('custom-readonly-bg'); 
} else {
  // 如果需要恢复原状，就移除类和只读属性
  $('#add_at_inv2_client')
    .prop('readonly', false)
    .removeClass('custom-readonly-bg');
}

简单总结下：prop()管DOM元素的原生属性，css()或类名管样式，选择器一定要写对（ID选择器加#），这样就能顺利修改背景色啦～

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