Question

您好我有一个包含许多不同类型输入的表格，其中一些是复选框。

我限制用户检查3个复选框，但允许他们编辑其他复选框。但是在页面加载时，我希望页面只显示已经检查过的复选框并隐藏其他复选框。所以基本上我需要隐藏名为“contact_numbers”的表行（如果尚未选中）。

我希望这可以在页面加载时完成，而不是点击，但我遇到了一些困难。如果有人能够指出我的方向会很棒！

我的代码位于下方或查看jsfiddle

$(document).ready(function () {
    if ($('.contact_no').attr('checked')) {
        $(this).closest('.contact_numbers').show()
    } else {
        $(this).closest('.contact_numbers').hide()
    }
    $("input[class='contact_no']").change(function () {
        var maxAllowed = 3;
        var cnt = $("input[class='contact_no']:checked").length;
        if (cnt > maxAllowed) {
            $(this).prop("checked", "");
            alert('Select  ' + maxAllowed + ' telephone numbers, uncheck one box to check another!');
        }
    });
    $("#add").click(function () {
        $(".contact_numbers:hidden:first").fadeIn("slow");
    });
    $(".contact_numbers").on('click', '.remove', function () {
        $(this).closest('.contact_numbers').hide()
    });
});

Answer 1

试试这个：

    $('.contact_no').each(function () {
        $this = $(this);
        if ($this.is(':checked')) {
            $this.parents('tr.contact_numbers').show()
        } else {
            $this.parents('tr.contact_numbers').hide()
        }
    });

检查this fiddle

Answer 2

您可以使用.not()选择器

$('.contact_no:not(:checked)').closest('.contact_numbers').hide();

Working Demo

如果未在文档启动时选中，则jQuery隐藏复选框

2 个答案: