如何实现input字段有数据库值时只读、空值时可编辑

现有代码问题 #

• $(document).ready回调里的$(this)指向的是document对象，无法正确获取#fines输入框的取值
• 原生readonly是布尔属性，只要元素上存在该属性就会生效，哪怕赋值为'false'字符串依然会保持只读状态，不能通过设置属性值为'false'取消只读

正确实现代码 #

HTML代码（无需修改） #

<input type="text" class="form-control" id="fines" name="fines" placeholder = "Amount Penalty" required>

JavaScript代码 #

$(document).ready(function(){
  const $fines = $('#fines');
  // 页面加载完成后先判断初始值：有数据库写入的值就直接设为只读
  if($fines.val().trim() !== ''){
    $fines.prop('readonly', true);
  }
  
  // 如果需要实现「空值默认只读，点击后才可以编辑」的逻辑，可补充以下代码
  $fines.on('click', function(){
    if($(this).val().trim() === ''){
      $(this).prop('readonly', false);
    }
  })
});
</script>

补充说明 #

• 使用prop方法操作布尔属性比attr更稳妥，直接传入布尔值true/false即可切换只读状态
• 代码中增加了trim()处理，避免输入框存在空格等空白字符时判断逻辑出错

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