Question

我正在使用ASP.NET Web表单构建一个页面，使用JavaScript和jQuery。我要做的是使复选框对复选框更改事件做出反应，如下所示：如果选中复选框：在屏幕上显示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的show / hide方法通过“display”工作。将“visibility：hidden”替换为“display：none”，它将按预期工作。

 <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>

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

1 个答案: