复选框取消选中不直观

Question

我有一个表格，并在其中是这样的：

<fieldset class="billing-address"> 
    <legend>Billing Address</legend> 
    <ol> 
     <li class="text combi"><label for="bill-address1">Address:</label> <input size="20" value="" name="basket_order:default:bill_address1" id="bill-address1"></li> 
     <li class="text"><label for="bill-address2">Address:</label> <input size="20" value="" name="basket_order:default:bill_address2" id="bill-address2"></li> 
     <li class="text"><label for="bill-address3">Town/City:</label> <input size="20" value="" name="basket_order:default:bill_address3" id="bill-address3"></li> 
     <li class="text"><label for="bill-address4">Region:</label> <input size="20" value="" name="basket_order:default:bill_address4" id="bill-address4"></li> 
     <li class="text"><label for="bill-post-code">Post code:</label> <input size="10" value="" name="basket_order:default:bill_postcode" id="bill-post-code"></li> 
    </ol> 
</fieldset> 

缘由太过圆环柱进入这里，我不能在HTML直接获得，需要通过JavaScript做的事情。所以，我想补充一个复选框和标签上面使用下列内容：

$('.billing-address ol').before('<input type="checkbox" id="billing-add-different" /><label for="billing-add-different">My billing address is the same as my delivery address</label>'); 

    $('#billing-add-different').prop('checked',true).toggle(
     function(){ 
      $('.billing-address ol input, .billing-address ol select').css('background','#CCC').attr('disabled','disabled'); 
     }, 
     function(){ 
      $('.billing-address ol input, .billing-address ol select').css('background','#FFF').removeAttr('disabled'); 
     } 
    ); 

这将触发取决于是否它选中与否“禁用”属性和背景颜色。

但是，虽然该功能正在触发，但复选框仍会被视觉检查。

我做了一个jsfiddle来说明http://jsfiddle.net/EFQuh/。错误发生在Firefox 8.0中，不确定其他人。

Answer 1

我不知道是什么问题（可能是toggle功能），但您可以简化代码：

$('#billing-add-different').prop('checked',true).change(function(){ 
    $('.billing-address ol input, .billing-address ol select') 
     .css('background-color', this.checked ? '#CCC' : '#FFF') 
     .prop('disabled',this.checked); 

}).change(); 

DEMO

Answer 2

您需要使用change事件，并检查this.checked在事件的功能内。