无法在 jQuery 中显示/隐藏复选框检查按钮答案

【问题标题】：Unable to show/hide button on checkbox check in jQuery无法在 jQuery 中显示/隐藏复选框检查按钮
【发布时间】：2016-01-20 09:15:11
【问题描述】：

我正在使用 ASP.NET 复选框控件。我想要做的是简单地改变复选框更改事件上按钮的可见性。如果选中复选框则隐藏按钮，否则如果未选中则显示按钮。

我的 jQuery 代码有 2 个问题。

初始更改事件不会被触发。我在 jQuery 代码上设置了断点并且函数没有被调用。在第二次更改时，它会定期调用。
当按钮显示时，它仅在不到一秒的时间内可见，然后返回隐藏状态，即使它显示在下一次更改之前也是可见的。

这是我的 ASP.NET 代码：

<asp:UpdatePanel UpdateMode="Conditional" ID="upDirectDebitPanel" runat="server" EnableViewState="True">
    <ContentTemplate>
        <div runat="server" id="divSameAsMerchant" visible="False">
            <asp:CheckBox runat="server" ID="chkSameAsMerchantBank" AutoPostBack="True" Checked="True" OnCheckedChanged="chkSameAsMerchantBank_CheckedChanged" />
            <asp:Label runat="server" AssociatedControlID="chkSameAsMerchantBank" ID="lblSameAsMerchantBank" meta:resourcekey="lblSameAsMerchantBank"></asp:Label>
            <asp:Button runat="server" ID="btnShowBankInformationModal" meta:resourcekey="btnShowBankInformationModal" CausesValidation="False" style="visibility: hidden"/>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

这是 jQuery 代码：

var sameAsMerchantBank = $('#<%=chkSameAsMerchantBank.ClientID%>');
var btnShowBankInformationModal = $('#<%=btnShowBankInformationModal.ClientID%>');

$(sameAsMerchantBank).change(function () {
     if ($(this).is(":checked")) {
           $(btnShowBankInformationModal).css("visibility", "hidden");
     }
     $(btnShowBankInformationModal).css("visibility", "visible");
});

这是该复选框的后端事件：

protected void chkSameAsMerchantBank_CheckedChanged(object sender, EventArgs e)
{
    if (chkSameAsMerchantBank.Checked)
    {
        SetShortAccountInfo(merchantIban.Value, merchantAccountNumber.Value,
                    merchantSwiftNumber.Value);
    }
    else
    {
        SetShortAccountInfo(directDebitIban.Value, directDebitAccountNumber.Value, directDebitSwiftNumber.Value);
    }
}

有人知道我做错了什么吗？

【问题讨论】：

试试$(document).on("change",sameAsMerchantBank,function () { //do stuff });
另外你应该写else它每次都输入$(btnShowBankInformationModal).css("visibility", "visible");
@ParthTrivedi 是的，谢谢，我刚刚注意到缺少其他部分。这解决了一部分问题。但是按钮仍然只显示很短的时间......
是的，因为您有 Checked="True"，然后在 DOM 加载后触发此 change 事件
你能分享一下你在chkSameAsMerchantBank_CheckedChanged事件下的表现吗？

标签： javascript jquery asp.net checkbox

【解决方案1】：

在你的代码中做

//changes made here
//$(sameAsMerchantBank).change(function () {
$(document).on("change",sameAsMerchantBank,function () {
     if ($(this).is(":checked")) {
           $(btnShowBankInformationModal).css("visibility", "hidden");
     }
     //always goes here
     //$(btnShowBankInformationModal).css("visibility", "visible");
     //put else
     else{
       $(btnShowBankInformationModal).css("visibility", "visible");
     }
});

【讨论】：

【解决方案2】：

我以前遇到过这个问题。这是更新面板的常见问题。有两种方法可以解决。使用该复选框的触发器或使用以下代码：

function load() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(jsFunctions);
}
function jsFunctions() {            
        $("#btnClick").click(function () {                    
            alert("Alert: Hello from jQuery!");
    });
}

此代码。在 jsfunctions 函数中重新绑定您的事件。

【讨论】：

您以错误的方式添加代码。在每行之前添加 4 个空格或选择所有代码并在编辑器中单击 { }（代码图标）。我还为你编辑了它:)
不必抱歉，哥们，很高兴我能帮上忙！