当actual_operation_date字段有值时启用/禁用提交按钮的函数错误问题

我来帮你搞定这个问题，你的代码主要有几个逻辑和细节上的问题，我一步步给你修正：

问题诊断 #

1. 逻辑颠倒：你的函数里，当字段有值时反而禁用按钮，和需求完全相反
2. 空值判断错误：输入框为空时，val()返回的是空字符串""而不是null，所以原来的!= null判断永远为真
3. 属性操作不当：jQuery操作disabled这种布尔属性时，用prop()比attr()更可靠
4. 缺少触发时机：没有绑定字段值变化的事件，函数不会自动执行

修正后的完整代码 #

HTML部分（添加事件监听） #

<div class="item form-group">
  <label for="ActuallOperationDate" class="control-label col-md-3">Actuall Operation Date</label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <!-- 添加onchange事件监听，值变化时调用activeMe -->
    <input class="form-control col-md-7 col-xs-12" id="Actuall_Operation_Date" name="Actuall_Operation_Date" readonly onchange="activeMe()" />
  </div>
</div>

<button type="submit" value="Create" id="activeMe" class="btn btn-success" disabled>Submit</button>

JavaScript部分（修正逻辑和判断） #

function activeMe() {
  // 去除首尾空格，避免空格导致的误判
  var ac_opDate = $('#Actuall_Operation_Date').val().trim();
  
  if (ac_opDate !== "") {
    // 字段有值，启用提交按钮
    $('#activeMe').prop('disabled', false);
  } else {
    // 字段为空，保持按钮禁用
    $('#activeMe').prop('disabled', true);
  }
}

// 额外提示：如果是通过JS给只读字段赋值（比如日期选择器），记得手动触发事件
// 示例：$('#Actuall_Operation_Date').val('2024-05-20').trigger('change');

关键细节说明 #

• 空值判断：用trim()处理后再判断是否为空字符串，可以避免用户输入（或JS赋值）的空格被误判为有效内容
• 属性操作：disabled是DOM元素的布尔属性，prop()直接操作元素的属性状态，比attr()更稳定，后者操作的是HTML标签上的属性
• 触发时机：因为字段是只读的，用户无法直接输入，所以如果是通过其他方式（比如日期选择组件、后台接口赋值）改变字段值，一定要调用activeMe()或者触发change事件，否则按钮状态不会更新

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