我有一个表格,其中包括:

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

这会切换“禁用”属性和背景颜色,具体取决于是否勾选。

但是,虽然该功能正在触发,但仍会以可视方式检查该复选框。

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

===============>>#1 票数:2 已采纳

我不知道问题出在哪里(可能是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

===============>>#2 票数:1

您需要使用change事件并在事件功能内选中this.checked

  ask by Scott Brown translate from so

未解决问题?本站智能推荐:

5回复

选中和取消选中复选框

如何正确选中和取消选中复选框? 我有很多麻烦。 这是我的代码http://jsfiddle.net/N5Swt/ : 它不起作用。 为什么?
5回复

选中/取消选中复选框

HTML: JS: https://jsfiddle.net/j59eeqgu/ 我想选择我的主复选框,并同时选中其他复选框,但是我做错了。 当我尝试选择我的主复选框时,什么也没有发生。
2回复

为什么复选框未在jquery中取消选中或单击事件未触发?

您能否告诉我,为什么在jquery或click事件中未取消选中复选框,而不触发? 我的演示中有一个复选框。用户可以取消选中此复选框,但无法取消选中此复选框。这是我的代码 https://jsbin.com/lohaleleba/edit?html,css,js,输出
2回复

HTML单选和复选框未在内部检查/取消选中

因此,从视觉上看,它们具有正确的行为。 一组中仅选中了一个单选按钮,并且复选框在按下时会进行检查/取消选中,但是在检查控制台中的输入状态时似乎不是这样。 所以我有: 但是无论我单击什么,行为总是相同的
5回复

取消选中jquery复选框?

即使页面被缓存,是否可以在页面输入时修改此代码以取消选中复选框ID LOTL?
1回复

AngularJS-取消选中复选框

我正在尽可能多地使用angularjs-我正在编辑一些旧系统,我不能承担太多更改。 因此,基本上,我需要实现一个取消选中页面中每个复选框的功能。 最简单的解决方案是使用angular.element而无需太多更改现有系统。 现在我知道,这是一个非常糟糕的解决方案,但是我需要使其起作用。
4回复

如何取消选中复选框?

最初选中两个复选框。 但是当我单击任何复选框时,其选中的值应更改为checked = false。 我怎么能用jquery或javascript做到这一点?
6回复

如何取消选中复选框?

我有一个总是被选中的复选框,但是根据我表单中其他地方的用户输入(我在选择框上有一个onChange="functionName" )我想取消选中它。 我怎么做?
2回复

将switchery复选框取消选中

我现在使用switchery复选框 ,如果我单击一个按钮,如何取消选中或使用jquery检查它,例如
2回复

无法取消选中复选框

我目前正试图解决我的jquery和我的html表单的问题。 问题:我有一个复选框,允许人们检查是否接受条款和条件。 此复选框由名为validateAccept()的jquery函数验证。 但是,在我插入if有效返回true之后,如果无效则返回false,则复选框将无法响应。 我是jq