点击输入字段时重置Modal Wizard至初始状态的实现方案

我明白你的问题了——每次保存后重新打开Modal，之前选的选项都还留在里面，而且没自动回到第一步对吧？你之前用的$("#scheduleModal").val("")没用，是因为你选中的是Modal的容器div元素，val()方法只对表单输入控件生效，对div完全不起作用。咱们来一步步搞定这个重置问题：

推荐方案：绑定Modal隐藏事件（覆盖所有关闭场景） #

不管用户是点击「Save」还是「Close」按钮关闭Modal，都应该把状态重置回初始值，所以用Bootstrap Modal的hidden.bs.modal事件最靠谱，这个事件会在Modal完全隐藏后触发：

// 当Modal完全隐藏时执行重置逻辑
$('#scheduleModal').on('hidden.bs.modal', function () {
  // 1. 取消所有单选按钮的选中状态
  $('input[type="radio"]', this).prop('checked', false);
  
  // 2. 清空时间输入框
  $('#time-selection', this).val('');
  
  // 3. 把月份日期下拉框重置为默认的第一个选项（value=1）
  $('#dayOfMonthSelection', this).val('1');
  
  // 4. 强制回到Wizard的第一步
  $('#recurringJobWizard .tab-pane').removeClass('active in');
  $('#step1').addClass('active in');
});

备选方案：仅在点击「Save」按钮时重置 #

如果你只想在用户点击外部的「Save」按钮时才重置，可以用下面的写法（不过还是推荐上面的方案，能覆盖所有关闭Modal的场景）：

$("#save-job").click(function () {
  // 先关闭Modal（如果你的Save按钮没有自动触发关闭的话）
  $('#scheduleModal').modal('hide');
  
  // 执行重置逻辑
  resetScheduleModal();
});

// 封装重置函数，方便后续复用
function resetScheduleModal() {
  // 重置所有单选框
  $('#scheduleModal input[type="radio"]').prop('checked', false);
  // 清空时间输入框
  $('#time-selection').val('');
  // 重置日期下拉框
  $('#dayOfMonthSelection').val('1');
  // 切回第一步
  $('#recurringJobWizard .tab-pane').removeClass('active in');
  $('#step1').addClass('active in');
}

关键逻辑说明 #

• 对于单选框：必须用prop('checked', false)来取消选中，因为单选框的选中状态是DOM元素的属性，用prop()比attr()更准确。
• 面板切换：移除所有tab面板的active in类，再给step1加上，就能强制回到向导的初始步骤。
• 作用域控制：用$('选择器', this)可以确保只操作当前Modal内的元素，避免影响页面上其他同名控件。

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