javascript - 标签或 div 不会显示在 javaScript 复选框更改事件上

Question

我正在使用 ASP.NET Web 表单以及 JavaScript 和 jQuery 构建一个页面。我想做的是使复选框对复选框更改事件使用react，如下所示:如果选中复选框:在屏幕上显示 3 个标签，否则取消选中复选框:打开模式弹出窗口。

我已经设法使弹出窗口正常工作，但我的标签似乎从未显示在屏幕上。我尝试过在整个 div 元素中访问它们，并且尝试过访问单个标签，但仍然一无所获。

这是我的代码:

<%@ Register Src="~/Controls/BankInformation.ascx" TagName="BankInformation" TagPrefix="ABS" %>

<script type="text/javascript">
    $(document).ready(function () {
        var isDirectDebitSelected = $('#<%=chkDirectDebit.ClientID%>');
        var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');
        var sameAsMerchantBankLabel = $('#<%=txtSameAsMerchantBank.ClientID%>');
        var bankInformation = $('#<%=bankInfoDialog.ClientID%>');
        var accountInfo = $('#<%=divAccountInfo.ClientID%>');
        var ibanLabel = $('<%=lblIBAN.ClientID%>');

        function OpenDirectDebitDialog(dialogID) {
            dialogID.modal();
        }

        function ValidateAndCloseDirectDebitDialog(validationGroup, dialogID) {
            var pageValid = Page_ClientValidate(validationGroup);
            if (pageValid)
                $(dialogID).modal("hide");
        }

        $(sameAsMerchantBankCheckbox).change(function () {
            if (sameAsMerchantBankCheckbox.is(':checked')) {
                accountInfo.show();
                ibanLabel.show();
            } else {
                OpenDirectDebitDialog(bankInformation);
            }    
        });

        function setSameAsMerchantVisible() {
            if (isDirectDebitSelected.is(':checked')) {
                sameAsMerchantBankCheckbox.show();
                sameAsMerchantBankLabel.show();
            } else {
                sameAsMerchantBankCheckbox.hide();
                sameAsMerchantBankLabel.hide();
            }
        }
        isDirectDebitSelected.bind('change', function () {
            setSameAsMerchantVisible();
        });

        setSameAsMerchantVisible();
    });
</script>

<asp:CheckBox runat="server" ID="chkDirectDebit" />
<asp:Label runat="server" AssociatedControlID="chkSameAsMerchantBank" ID="txtDirectDebit" meta:resourcekey="lblDirectDebit"></asp:Label>
<asp:CheckBox runat="server" ID="chkSameAsMerchantBank" AutoPostBack="False" Checked="True" />
<asp:Label runat="server" AssociatedControlID="txtSameAsMerchantBank" ID="txtSameAsMerchantBank" meta:resourcekey="lblSameAsMerchantBank"></asp:Label>

<div id="bankInfoDialog" runat="server" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h1 id="bankInformationDialogHeader"><%=GetLocalResourceObject("BankInfoHeader") %></h1>
    </div>
    <div class="modal-body">
        <ABS:BankInformation runat="server" ID="bankInformation" />
    </div>
    <div class="modal-footer">
        <asp:Button runat="server" ID="btnUpdate" meta:resourcekey="btnUpdate" />
        <button id="btnCancel" runat="server" data-dismiss="modal" aria-hidden="true"><%=GetLocalResourceObject("Cancel")%></button>
    </div>
</div>
<div id="divAccountInfo" style="visibility: hidden" runat="server">
    <asp:Label runat="server" ID="lblIBAN" meta:resourcekey="lblIBAN"></asp:Label>
    <asp:Label runat="server" ID="lblAccountNumber" meta:resourcekey="lblAccountNumber"></asp:Label>
    <asp:Label runat="server" ID="lblSwiftNumber" meta:resourcekey="lblSwiftNumber"></asp:Label>
</div>

在选中直接借记复选框之前，设置与商业银行相同的复选框会被隐藏。这会导致标签不显示吗？由于显示了模式弹出窗口，事件肯定会被触发。

Answer 1

jQuery 的显示/隐藏方法通过“display”工作。将“可见性:隐藏”替换为“显示:无”，它将按预期工作。

 <div id="divAccountInfo" style="display: none" runat="server">
     <asp:Label runat="server" ID="lblIBAN" meta:resourcekey="lblIBAN"></asp:Label>
     <asp:Label runat="server" ID="lblAccountNumber" meta:resourcekey="lblAccountNumber"></asp:Label>
     <asp:Label runat="server" ID="lblSwiftNumber" meta:resourcekey="lblSwiftNumber"></asp:Label>
 </div>