9.2.2 关闭或打开字段

表单字段通常是用来填充的,毕竟,如果不能在一个文本字段输入,那它有什么用处呢?然而,有的时候我们不希望访问者能够填充一个文本字段、选中一个复选框或者从菜单选择一个选项。假设有一个字段,只有在前一个复选框选中的时候才能够填充。例如,在用来确定美国收入税的1040表单上,有一个字段用来收集你的配偶的社会安全号码。只有在你已经结婚的情况下,才应该填充该字段。

要“关闭”一个不应该填充的表单字段,可以使用JavaScript来关闭它。关闭一个字段意味着它不能被选中(单选按钮或复选框),不能录入(文本字段),不能选择(菜单)或单击(提交按钮)。一些浏览器还会改变表单控件的颜色,使用灰色来使其淡化。

要关闭一个表单字段,直接把字段的disabled属性设置为true。例如,要关闭表单上所有的输入字段,可以使用如下的代码:


$(':input'). attr('disabled',true);


通常会关闭一个字段来响应一个事件。以1040表单为例,当单击了“single”按钮的时候,可以关闭收集配偶的社会安全号码的字段。假设声明你是单身的单选按钮的ID为single,而收集配偶的社会安全号码的字段的ID为spouseSSN,那么JavaScript代码如下所示:


$('#single').click(function(){

$('#spouseSSN').attr('disabled',true);

});


当然,如果关闭一个字段,可能希望有一种方式能够再次打开它。要做到这点,直接把disabled属性设置为false。例如,要打开表单上的所有字段:


$(':input').attr('disabled',false);


注意:当关闭一个表单字段的时候,确保使用布尔值(参见2.3.3节)true或false,而不是字符串'true'或'false'。例如,下面的代码是错误的:


$(':input').attr('disabled','false');


正确的形式是:


$(':input').attr('disabled',false);


再回到收入税的例子:如果访问者选择了“married”选项,需要确保收集配偶的社会安全号码的字段是激活的。假设结婚选项按钮的ID为married,可以添加如下代码:


$('#married').click(function(){

$('#spouseSSN').attr('disabled',false);

});


我们将在9.3.1节的教程中看到使用这一技术的一个例子。

常见问题阻止多次提交

有时候,我们得到相同的表单信息的多次提交。如何防止这种情况发生呢?

Web服务器不会总是最快的生物,Internet也不是。通常,在访问者按下表单的提交按钮和一个新的“We got your info”页面出现之间,总是有一段延迟。有时候,这段延迟真的很长,并且不耐烦的Web冲浪者会再次(或者三次、四次地)单击提交按钮,他们会以为表单的第一次提交无效。

这种现象可能导致同样的信息提交两次。在网上商店的例子中,这也可能意味着一张信用卡付两次费。幸运的是,使用JavaScript,一旦表单提交过程开始了,有一种简单的方法来关闭一个提交按钮。使用提交按钮的disabled属性,我们可以将其关闭,以避免再次单击它。假设该表单有一个ID为formID,而提交按钮有一个ID为submit。首先,给表单添加一个submit()函数,然后,在该函数中关闭提交按钮,如下所示:


$('#formID').submit(function(){

$('#submit').attr('disabled',true);

});


如果该页面只有一个表单,你甚至不需要为每个标签使用ID:


$('form').submit(function(){

$('input[type=submit]').

attr('disabled',true);

});


此外,可以通过修改按钮的值来改变提交按钮上的消息。例如,按钮首先显示“Submit”,但是当表单提交的时候,按钮就改变为显示“sending information”。可以像下面这样做:


$('#formID').submit(function(){

var subButton=$(this).

find(':submit');

subButton.attr('disabled',true);

subButton.val('……sending

information');

});


确保把这段代码放入到$(document).ready()函数中,关于该函数的介绍参见5.4.1节。