jquery复选框仅在第一次加载时触发答案

【问题标题】：jquery checkbox triggering on first load onlyjquery复选框仅在第一次加载时触发
【发布时间】：2016-04-19 20:07:39
【问题描述】：

我有一个单选按钮，用于控制选中的属性并禁用/启用与您选中的单选按钮有关的复选框。

问题是 onload 我选中了单选按钮 2。然后启用所有复选框。如果我选中了单选按钮 1，则必须禁用前 2 个复选框，而第 3 个复选框应保持启用状态并且必须选中。

如果你重复这个场景。检查单选按钮 2 运行顺利，但如果您重新检查单选按钮 1，则最后一个选中的框在其属性上标记为选中，但该框没有选中。

基本上这需要目视检查才能发送数据。

HTML：

<span><input type="radio" name="attendee" id="guest1" value="1">1</span> <span><input type="radio" name="attendee" id="guest2" value="2" checked="checked">2</span><br>

<span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required JPCCheck"><span class="wpcf7-list-item first"><input type="checkbox" name="attending2[]" value="14 september - Welcome Dinner">&nbsp;<span class="wpcf7-list-item-label">14 september - Welcome Dinner</span></span><span class="wpcf7-list-item"><input type="checkbox" name="attending2[]" value="15 september Wedding Day">&nbsp;<span class="wpcf7-list-item-label">15 september Wedding Day</span></span><span class="wpcf7-list-item last"><input type="checkbox" name="attending2[]" value="N/A">&nbsp;<span class="wpcf7-list-item-label">N/A</span></span></span>

脚本：

$(function(){
    $("#guest1").click( function(){
       if( $(this).is(":checked") ) {
        $('input[name="attending2[]"]').prop('disabled', true).css("background","#666").attr("checked", false);
        $('.last input[name="attending2[]').prop('disabled', false).css("background","#666").attr("checked", true);
        $('select[name="foodspec2"]').val("N/A").prop('disabled', true).css("background","#666");
        $('select[name="country2"]').val("N/A").prop('disabled', true).css("background","#666");
        $("input[name='salutation2']").val("N/A").prop('readonly', true).css("background","#666");
        $("input[name='name2']").val("N/A").prop('readonly', true).css("background","#666");
        $("textarea[name='address22a']").val("N/A").prop('readonly', true).css("background","#666");
        $("textarea[name='address22b']").val("N/A").prop('readonly', true).css("background","#666");                
        $("input[name='city2']").val("N/A").prop('readonly', true).css("background","#666");
        $("input[name='postal2']").val("000").prop('readonly', true).css("background","#666");
        $("input[name='passcode2']").val("000").prop('readonly', true).css("background","#666");
        return;
       }

    });

    $("#guest2").click( function(){
       if( $(this).is(":checked") ) {
        $('input[name="attending2[]"]').prop('disabled', false).css("background","#dadada").attr("checked", false);
        $('.last input[name="attending2[]').prop('disabled', false).css("background","#666").attr("checked", false);
        $('select[name="foodspec2"]').val(" ").prop('disabled', false).css("background","#dadada");
        $('select[name="country2"]').val(" ").prop('disabled', false).css("background","#dadada");
        $("input[name='salutation2']").val(" ").prop('readonly', false).css("background","#dadada");
        $("input[name='name2']").val(" ").prop('readonly', false).css("background","#dadada");
        $("textarea[name='address22a']").val(" ").prop('readonly', false).css("background","#dadada");
        $("textarea[name='address22b']").val(" ").prop('readonly', false).css("background","#dadada");
        $("input[name='city2']").val(" ").prop('readonly', false).css("background","#dadada");
        $("input[name='postal2']").val(" ").prop('readonly', false).css("background","#dadada");
        $("input[name='passcode2']").val(" ").prop('readonly', false).css("background","#dadada");
    }
    });
});

只要功能如前所述，Javascript 或 jquery 解决方案都可以。

小提琴HERE

【问题讨论】：

这对你有用吗？ .prop('checked',true)
是的，谢谢。我们必须忽略这一点。
仅供参考，您的代码需要认真重构。这是非常难以维护的（并且不可读......）
@A.Wolff 我知道，但只要代码能正常工作，一切都很好。如果您有其他替代答案或提示，将不胜感激。谢谢。

标签： javascript jquery html checkbox

【解决方案1】：

您好，亲爱的，它适用于单选按钮上的选中和启用/禁用复选框改变。如果使用有任何困惑，请写评论。

<body>
        <span>
            <input type="radio" name="attendee" id="guest1" value="1">
            1</span><span>
            <input type="radio" name="attendee" id="guest2" value="2" checked="checked">
            2</span>
        <br>
        <span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required JPCCheck"><span class="wpcf7-list-item first">
                <input type="checkbox" name="attending2[]" value="14 september - Welcome Dinner">
                &nbsp;<span class="wpcf7-list-item-label">14 september - Welcome Dinner</span></span><span class="wpcf7-list-item">
                <input type="checkbox" name="attending2[]" value="15 september Wedding Day">
                &nbsp;<span class="wpcf7-list-item-label">15 september Wedding Day</span></span><span class="wpcf7-list-item last">
                <input type="checkbox" name="attending2[]" value="N/A">
                &nbsp;<span class="wpcf7-list-item-label">N/A</span></span></span>
        <script>
            $(function() {
                $(document).on("change", "#guest1, #guest2", function() {
                    var radioVal = $(this).val();
                    var checkLength = $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').length;

                    if (radioVal == 1) {
                        for (var i = 0; i < checkLength; i++) {
                            if (i == (checkLength - 1)) {
                                $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", false);
                                $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop('checked', true);
                            } else
                                $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", true);
                        }
                    } else {
                        for (var i = 0; i < checkLength; i++) {
                            if (i == (checkLength - 1)) {
                                $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", false);
                                $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop('checked', false);
                            } else
                                $('.wpcf7-form-control .wpcf7-list-item input[type="checkbox"]').eq(i).prop("disabled", false);
                        }

                    }
                });
            });
        </script>
    </body>

【讨论】：