复选框不能在视觉上取消选中

Checkbox not unchecking visually

本文关键字：取消 视觉上 不能 复选框      更新时间：2023-09-26

我有一个表单，里面是这样的:

<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');
        }
      );

这将根据是否勾选来切换'disabled'属性和背景颜色。

然而，尽管函数正在触发，复选框仍然被选中。

我在http://jsfiddle.net/EFQuh/上做了一个jsfiddle来说明。此错误出现在Firefox 8.0中，其他版本不确定

我不知道是什么问题(可能是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();

您需要使用变更事件并在事件的功能中检查this.checked

相关文章：