10-解决方案2

10.2.3　解决方案2

虽然选择复选框禁用表单字段已经足以达到用户的要求，但是还可以更进一步，用运送信息中的数据预先填写账单文本字段。

这个解决方案的第一部分在结构上和前一个解决方案相同。但是，除了禁用账单字段之外，还用运送信息字段的数据预先填写它们。下面的代码假定运送和账单所用的 <fieldset> 元素包含相同数量的文本输入字段，顺序也相同：

//寻找"sameAsShipping"复选框,监听change事件
$('#sameAsShipping').change(function(){
　　 if( this.checked ){
　　　　　//找到billingInfo中的所有文本输入字段,禁用它们,然后循环读取每个输入字段
　　　　　$('#billingInfo input:text').attr('disabled',
'disabled').each(function(i){
　　　　　　　　　//寻找billingInfo内的所有文本输入字段,禁用它们
　　　　　　　　　var valueFromShippingInput =
$('#shippingInfo input:text:eq('+i+')').val();
　　　　　　　　　//用运送文本字段的值设置账单文本字段值
　　　　　　　　　$(this).val( valueFromShippingInput );
　　　　　}); // close each()
　　 } else {
　　　　　//寻找billingInfo内的所有文本输入字段,启用它们
　　　　　$('#billingInfo input:text').removeAttr('disabled');
　　 }
}).trigger('change'); // close change() then trigger it结束change(),然后触发它

本解决方案的第二部分在用户输入运送字段信息时，自动更新账单字段，但是只在禁用账单字段时进行：

//寻找shippingInfo文本输入字段,监听keyup和change事件
$('#shippingInfo input:text').bind('keyup change',function(){
　　　　　//如果选中"sameAsShipping"复选框
　　　　　if ( $('#sameAsShipping:checked').length ){
　　　　　//找出文本输入字段中的this对象
　　　　　var i = $('#shippingInfo input:text').index( this );
　　　　　var valueFromShippingInput = $(this).val();
　　　　　$('#billingInfo input:text:eq('+i+')').val( valueFromShippingInput );
　　 }
}); // 结束bind()