本文介绍如何通过 jquery 在用户成功点击“关闭任务”按钮后，立即禁用页面上的“审批”和“退回”两个操作按钮，防止重复提交或误操作，提升表单交互的安全性与用户体验。
本文介绍如何通过 jquery 在用户成功点击“关闭任务”按钮后，立即禁用页面上的“审批”和“退回”两个操作按钮，防止重复提交或误操作，提升表单交互的安全性与用户体验。
要实现点击“Close Task”（ID 为 #reject_button）后禁用 #approve_button 和 #return_button，最简洁可靠的方式是使用 jQuery 监听按钮的点击事件，并动态添加 disabled 属性。注意：该逻辑应在 DOM 加载完成后执行，且需确保 jQuery 已正确引入（如 Bootstrap 项目中通常已包含）。
以下是推荐的前端脚本（建议置于 </body> 前或使用 $(document).ready() 包裹）：
<script>
$(document).ready(function() {
$('#reject_button').on('click', function(e) {
// 可选：防止表单默认提交（若按钮位于 form 内且 type="submit"）
// e.preventDefault();
// 禁用两个目标按钮
$('#approve_button, #return_button').prop('disabled', true);
// 可选：视觉反馈（如改变样式）
$('#approve_button, #return_button').addClass('disabled');
});
});
</script>✅ 关键说明：
- 使用 .prop('disabled', true) 而非 .attr('disabled', 'true') —— 这是 jQuery 推荐做法，能正确同步布尔属性状态；
- 若后续需恢复按钮（例如操作失败需重试），可调用 .prop('disabled', false) 并移除样式类；
- 后端 PHP 的 $_POST["reject-btn"] 处理逻辑本身不触发前端禁用，因此禁用动作必须由前端主动完成（即点击瞬间），而非等待服务器响应——这保证了即时性与用户体验；
- 若需「仅在后端更新成功后」才禁用（更严谨场景），则应将禁用逻辑移至 SweetAlert 的 then() 回调中，并配合 AJAX 提交替代传统表单跳转（本文未展开，但属进阶优化方向）。
⚠️ 注意事项：
- 确保按钮 ID 唯一且与 HTML 中完全一致（区分大小写、无空格）；
- 若页面含多个相似模块，建议改用 data 属性 + 事件委托方式增强可维护性；
- 禁用仅作用于前端，不能替代后端幂等性校验——数据库仍需通过唯一约束、状态机或乐观锁等方式防止重复关闭。
通过以上实现，用户点击“Close Task”后，“Approve”与“Return”按钮将立即置灰不可点，有效避免并发误操作，同时保持代码轻量、语义清晰、兼容主流浏览器。
