如何用jQuery实现仅无值文本框设为只读、点击可编辑效果

你原有代码的逻辑存在两个明显错误：

• $('.rate').val() 只会获取匹配到的第一个.rate输入框的值，不会逐个校验所有输入框的内容
• 只读设置逻辑没有针对单个输入框独立判断，只要第一个输入框为空，就会把所有非当前输入框统一设为只读，完全忽略其他输入框本身是否已经填入值

修改聚焦事件的逻辑，遍历除当前聚焦输入框之外的所有目标输入框，逐个判断自身值是否为空，仅对空值输入框设置只读属性即可，修复后的JS代码如下：

$(document).on('focus', '.rate', function(){
  // 移除当前点击输入框的只读状态，允许编辑
  $(this).removeAttr("readonly");
  // 遍历其余所有.rate输入框
  $('.rate').not(this).each(function() {
    // 用$.trim去除首尾空格，避免全空格内容被判定为有值
    if ($.trim($(this).val()) === '') {
      // 仅空值输入框设置为只读
      $(this).attr("readonly", true);
    }
  });
});

补充说明：如果要更符合DOM属性操作规范，可以将attr/removeAttr替换为prop/removeProp，对原生布尔属性readonly的操作兼容性更好。

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