11-讨论

10.2.4　讨论

在上述的解决方案中，使用了 input:text 选择器，避免禁用复选框。

使用 .trigger('change') 会立刻执行 .change() 事件。该事件开始时会检查复选框状态，以防它默认选中。而且，事件方法保护Firefox和其他在页面刷新时保留单选按钮和复选框状态的浏览器。

当禁用JavaScript时会发生什么情况？你应该在CSS中默认隐藏复选框。然后使用JavaScript为覆盖前一个CSS规则的双亲元素添加一个类名。在下面的示例代码中，添加了一个附加的 <div> 来包围复选框和标签，便于隐藏它们：

<style type="text/css" title="text/css">
 #sameAsShippingWrapper { display:none; }
 .jsEnabled #sameAsShippingWrapper { display:block }
</style>
...
//当HTML DOM就绪时
$(document).ready(function(){
　　 $('form').addClass('jsEnabled');
});
...
<form>
 ...
 <div id="sameAsShippingWrapper">
　　 <label for="sameAsShipping">Same as Shipping</label>
　　 <input name="sameAsShipping" id="sameAsShipping" type="checkbox" ... />
 </div>
 ....
</form>

作为用CSS隐藏复选框然后用JavaScript显示它的替代方案，还可以用JavaScript将复选框添加到DOM中。我喜欢保持HTML、CSS和JavaScript的独立，但是有时候这是更好的解决方案：

var html_label = '<label for="sameAsShipping">Same as Shipping</label>';
var html_input = '<input name="sameAsShipping" id="sameAsShipping" type="checkbox"
value="sameAsShipping" />';
$( html_label + html_input ).prependTo('#billingInfo").change( ... ).trigger( ... );