9.3.2　关闭表单字段

上一部分只是热身。在教程的这一部分中，我们将根据表单的选择来关闭或打开两个表单字段。如果在Web浏览器中预览该表单（或者仅仅是看图9-4），将会看到在表单的账单信息部分的末尾，有选择支付方式的3个单选按钮：PayPal、Visa和MasterCard。此外，下面还有两个字段用来收集卡号和有效日期。这两个选项只适用于信用卡，而不适用于PayPal支付，因此，当单击PayPal按钮的时候，我们要关闭这两个字段。

页面的这部分的HTML如下所示（表单字段用粗体显示）：

1＜div＞＜span class="label"＞Payment Method＜/span＞

2＜input type="radio"name="payment"id="paypal"value="paypal"＞

3＜label for="paypal"＞PayPal＜/label＞

4＜input type="radio"name="payment"id="visa"value="visa"＞

5＜label for="visa"＞Visa＜/label＞

6＜input type="radio"name="payment"id="mastercard"value="mastercard"＞

7＜label for="mastercard"＞MasterCard＜/label＞

8＜/div＞

9＜div id="creditCard"class="indent"＞

10＜div＞

11＜label for="cardNumber"class="label"＞Card Number＜/label＞

12＜input type="text"name="cardNumber"id="cardNumber"＞

13＜/div＞

14＜div＞

15＜label for="expiration"class="label"＞Expiration Date＜/label＞

16＜input type="text"name="expiration"id="expiration"＞

17＜/div＞

18＜/div＞

3.返回到文本编辑器和文件form.html。

添加在前面部分创建的代码。首先，给PayPal单选按钮的click事件分配一个函数。

4.找到页面顶部的脚本，添加如下粗体所示的代码：

$（document）.ready（function（）{

$（'：text：first'）.focus（）；

$（'#paypal'）.click（function（）{

}）；//end click

}）；//end ready（）

PayPal选项的单选按钮有一个ID为paypal（参见HTML代码的第2行），因此，选择该字段只需要输入$（'#paypal'）。代码剩下的部分把一个匿名函数分配给了click事件（如果对此不是很明白，请参考5.2节关于给事件分配函数的介绍）。换句话说，单击PayPal单选按钮不仅会选中它（这是常规的Web浏览器行为），而且会触发我们将要创建的函数。

接下来，关闭信用卡号码和有效日期字段，因为当选择PayPal选项的时候，它们都不适用。

5.在上一步所添加的匿名函数内添加新的一行代码（下面的第4行）：

1$（document）.ready（function（）{

2$（'：text：first'）.focus（）；

3$（'#paypal'）.click（function（）{

4$（'#creditCard input'）.attr（'disabled'，true）；

5}）；//end click

6}）；//end ready（）

尽管我们想要关闭两个表单字段，但是有一种简单的方式只需要一行代码就可以做到这点。两个表单字段都在一个ID为creditCard的＜div＞标签中（参见上面的HTML代码的第9行）。因此，jQuery选择器$（#creditCard input'）解释为“选择ID为creditCard的一个元素中的所有＜input＞标签”。这种灵活的方法确保我们选择了所有的输入字段，因此，如果添加另一个字段，例如CVV字段，它也会被选中（CVV是信用卡后面的3个数字，Web页面常常要求输入这3个数字以加强网上订购的安全性）。

要关闭这些字段，只需要把disabled属性设置为true（参见9.2.2节）。然而，这对文本标签（“Card Number”和“Expiration Date”）没有什么影响。即便字段本身关闭了，这些文本标签仍然是粗黑体，这会传递潜在的令人混淆的信息：访问者可以填写这些字段。为了让关闭的状态更清晰，可以把标签改变为灰度。既然如此，也可以给字段添加一个灰色的背景，使它们看上去是关闭的（大多数浏览器已经这么做了，但是在Internet Explorer中，关闭的文本字段和其他激活的字段外观上没什么不同）。

6.把粗体所示的代码添加到脚本中：

1$（document）.ready（function（）{2

$（'：text：first）.focus（）；3

$（'#paypal'）.click（function（）{

4$（'#creditCard input'）.attr（'disabled'，true）8

5.css（'backgroundColor'，’#CCC'）；

6$（'#creditCard label'）.css（'color'，’#BBB'）；

7}）；//end click

8}）；//end ready（）

注意：第4行代码末尾的8符号表示我们应该把下一行当做前一行的一部分输入。因为真正的一行JavaScript代码很长，无法在本书一页的宽度中显示的，所以将其分为两行书写。然而，正如5.4.2节所述，当遇到换行和空白的时候，JavaScript很灵活，因此，如果你像下面这样，将一条JavaScript语句划分为多行，实际上是完全可以接受的（并且，有时候还易于阅读）：

$（'#creditCard input'）.attr（'disabled'，true）

.css（'backgroundColor'，’#CCC'）；

注意，有些程序员在多行都缩进代码保持格式，在这种情况下，缩进.css（）函数以便它和.attr（）函数对齐。

首先，我们使用jQuery的css（）函数来改变文本字段的背景颜色（注意，这段代码是第4行的一部分，因此，我们应该将其和attr（）函数输入到同一行）。接下来，我们使用css（）函数来调整＜div＞标签中的任何＜label＞标签的字体颜色（css（）在4.8.2节中介绍）。

如果此时在Web浏览器中预览该页面，将会看到单击PayPal按钮确实关闭了信用卡号码和有效日期字段，并且使得标签文本变为灰度。然而，如果单击了Visa或MasterCard按钮，字段仍然是激活的。当这两个单选按钮中的任何一个选中的时候，我们需要重新激活字段。

7.在click（）函数的后面添加一个新的空行（将在步骤6中的第7行和第8行之间添加新代码），然后，添加如下代码：

$（'#visa，#mastercard'）.click（function（）{

$（'#creditCard input'）.attr（'disabled'，false）?

.css（'backgroundColor'，’'）；

$（'#creditCard label'）. css（'color'，’'）；}）；//end click选择器$（'#visa，#mastercard'）选择了另外的两个单选按钮（参见9.3.2节中的HTML的第4行和第6行）。注意，为了删除单击PayPal按钮所添加的背景颜色和文本颜色，我们直接传递一个空字符串作为颜色值：$（'#creditCard label'）.css（'color'，"）；。这会删除元素的颜色，但是为样式表中最初定义的颜色留下位置。

我们快要完成这个教程了。在最后一部分中，我们将完成根据表单选择隐藏页面的一部分的功能。

jQuery插件提示使得选择日期更容易

如果你加入一个社会网络站点、预订飞机票，或者查找活动日历，会经常遇到要求输入一个日期的表单。在大多数情况下，你将会看到一个基本的文本字段，要求在其中输入一个日期。遗憾的是，我们不会总是知道从现在开始的下下个星期五的日期是什么。此外，一个空的文本字段意味着访问者可以以任何想要的格式输入一个日期，包括10-20-2009、10.20.2009、10/20/2009，甚至是20/10/2009。使得选择日期更容易并且确保能够接收同样格式的日期的最好办法是使用一个日历挂件，这是一个弹出式日历，它允许访问者通过单击日历上的某天来选择一个日期。尽管日历挂件很有用，但通过编程来实现它们本身还是很困难的。幸运的是，我们可以下载一个jQuery插件，它使得给表单添加一个日历挂件变为小菜一碟。

jQuery UI Datepicker插件是一个高级的日期选取的弹出式日历，你可以以多种方式来定制它。要使用它，你需要从位于http：//jqueryui.com/的jQuery UI站点获取该插件。可以使用下载页面（http：//jqueryui.com/download）仅获取日期选择器，或者，如果你喜欢这个jQuery UI插件的其他元素，也可以选择它们。也可以使用jQuery UI Themeroller（http：//jqueryui.com/themeroller/）创建一个定制的样式表。

一旦下载了这些文件，将jQuery UI CSS文件添加到页面，添加jQuery库（参见本书4.3节），然后，连接到jQuery UI文件（参见本书1.2节连接到一个外部JavaScript文件的方法）。你将会在本书10.2节了解到关于jQuery UI的更多内容。

在设置好所有这些基本步骤之后，只需要对一个文本字段应用datepicker（）函数。例如，假设有一个表单和ID为dateOfBirth的一个文本字段。为了使得当某人在字段内部单击的时候弹出一个日历，给基本的$（document）.ready（）函数添加一个＜script＞标签（参见5.4.1节对此的介绍），并像下面这样调用Datepicker：

$（'#dateOfBirth'）.datepicker（）；

当然，$（'#dateOfBirth'）是选择文本字段的一种旧的jQuery方法，datepicker（）函数随后处理剩下的事情。Datepicker插件支持的选项包括选择日期范围、通过单击日历图标打开弹出日历等。要了解这个有用的插件，请访问http：//marcgrabanski.com/code/ui-datepicker/。