jquery - 如果尚未修改表单字段，如何禁用 jQuery 中的提交按钮？

Question

我有一个包含文本字段、复选框、单选按钮和提交按钮的 HTML 表单。

我希望仅当字段内容被修改时才启用提交按钮。现在问题来了:如果用户将字段内容修改回原始值，则应再次禁用表单按钮。

1. 原始字段值“foo”=> 禁用提交按钮
2. 用户将字段值更改为“bar”=> 启用提交按钮
3. 用户将字段值改回“foo”=> 提交按钮再次被禁用

如何使用 jQuery 实现这一目标？是否有任何类型的通用解决方案或脚本可用于任何表单？

编辑:我的要求不能通过简单的脏状态跟踪来完成。

Answer 1

使用脏状态跟踪。将 bool 值(例如 IsDirty)附加到每个输入控件，并在值更改时切换它。提交表单时检查是否至少有一个或多个值已更改，然后提交表单。否则向用户显示警告。

另一种解决方案是在控件值发生变化时调用通用函数。在此函数中，您可以在发生更改时将全局变量 (IsDirty) 设置为 true，还可以启用/禁用提交按钮。

var isDirty = false;

function SomethingChanged(){
     if( !isDirty ) isDirty = true;
     btnSubmit.disabled = !isDirty;
}

任何控件的通用函数

假设:将每个控件的初始值添加到一个属性“InitVal”

function SomethingChanged(control){
     if( control.value != control.InitVal )
          control.IsDirty = true;
     else
          control.IsDirty = false;
}

在上面的函数中，为了使其通用化，您可以为每种类型的控件(如 TextBoxChanged 和 DropDownChanged 等)设置单独的函数。但是每个控件都有以下两个属性

1. InitValue - 控件的初始值
2. IsDirty - 表示控件值已更改的 bool 值