本文介绍如何通过 jquery 在用户成功点击“close task”按钮后，立即禁用页面上的“approve”和“return”两个操作按钮，防止重复提交，提升表单交互安全性与用户体验。
本文介绍如何通过 jquery 在用户成功点击“close task”按钮后，立即禁用页面上的“approve”和“return”两个操作按钮，防止重复提交，提升表单交互安全性与用户体验。
要在点击“Close Task”按钮（#reject_button）后禁用“Approve”（#approve_button）和“Return”（#return_button）按钮，最直接有效的方式是使用 jQuery 监听点击事件，并动态添加 disabled 属性。注意：应确保 jQuery 已正确引入，且脚本在 DOM 加载完成后执行。
以下为推荐的完整实现代码（建议置于页面底部 <body> 结束前，或包裹在 $(document).ready() 中）：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#reject_button').on('click', function(e) {
// 可选：防止表单默认提交（若按钮位于 form 内且 type="submit"）
// e.preventDefault();
// 禁用两个目标按钮
$('#approve_button, #return_button').prop('disabled', true);
// 可选：添加视觉反馈（如灰化、文字提示）
$('#approve_button').text('Approved');
$('#return_button').text('Returned');
});
});
</script>✅ 关键说明：
- 使用 .prop('disabled', true) 而非 .attr('disabled', 'true') —— 这是 jQuery 推荐做法，能更准确地控制布尔属性状态；
- 若后端 PHP 更新成功后需永久禁用（即刷新后仍保持禁用），则应在服务端渲染时根据 task_status === 'closed' 动态添加 disabled 属性，而非仅依赖前端 JS；
- 当前 JS 方案适用于「即时交互反馈」，但不替代服务端校验——务必在 PHP 处理逻辑中再次验证任务状态，防止绕过前端禁用直接提交。
? 进阶建议：
结合后端状态，在 HTML 渲染阶段就禁用按钮，可增强健壮性。例如：
<?php $task_closed = ($task['task_status'] === 'closed'); ?> <button id="approve_button" <?= $task_closed ? 'disabled' : '' ?> >Approve</button> <button id="return_button" <?= $task_closed ? 'disabled' : '' ?> >Return</button>
这样即使 JS 未加载或被禁用，也能保障一致性。前后端双重防护，才是生产环境的最佳实践。
