在 ASP.NET 中选中复选框时如何显示弹出窗体？答案

【问题标题】：How can I show popup form when the checkbox is checked in ASP.NET?在 ASP.NET 中选中复选框时如何显示弹出窗体？
【发布时间】：2022-11-18 10:54:37
【问题描述】：

当复选框已被选中时，我无法显示弹出表单。我想我可能需要一个脚本来处理这种情况。请帮我解决这个问题。

<asp:checkbox id="additem" class="additem" runat="server"/>
                                           
<asp:Content ID="Content3" ContentPlaceHolderID="chpPopUp" runat="server">
    <asp:Panel ID="pnlPopup" runat="server" Style="display: none;Width:80%;max-width:100%; ">
        <asp:Button Style="display: none" ID="btnShowPopup" runat="server"></asp:Button>
        <cc2:ModalPopupExtender ID="mdlPopup" runat="server" BehaviorID="mdlPopup" PopupControlID="pnlPopup"
            TargetControlID="btnShowPopup" BackgroundCssClass="modalBackground">
        </cc2:ModalPopupExtender>
        <cc2:DragPanelExtender ID="dpePopup" runat="server" TargetControlID="pnlPopup" DragHandleID="pnlPopupHeader" />
        <div class="modal-content" style="Width:80%;max-width:100%;">
            <asp:Panel ID="pnlPopupHeader" runat="server" BorderColor="Black">
                <div>
                    <!-- Modal content-->
                    <div class="modal-header">
                       ........
                    </div>
                </div>
            </asp:Panel>
            <asp:UpdatePanel ID="upnDetail" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <!-- class="modal-dialog"-->
                    <div>
                        <!-- Modal content-->
                        <div class="modal-body">

                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </asp:Panel>
</asp:Content>

我尝试使用以下脚本，但没有用。

$('.additem').click(function () {
    var checked = $(this).is(':checked');
     if (checked) {
        document.getElementById("additem").value = "Yes";
       if (!confirm('Are you sure you want to mark this order as received?')) {
         $(this).removeAttr('checked');
         }
     }
     else {
     document.getElementById("additem").value = "No";
      if (!confirm('Are you sure you want to mark this order as  not received?')) {
         $(this).removeAttr('checked');
      }
     }
   });

【问题讨论】：

什么没用？没显示吗？单击处理程序没有被调用吗？您的控制台是否充满错误消息？

标签： javascript c# asp.net-core

【解决方案1】：

<asp:checkbox id="additem" class="additem" runat="server"/>

应该放在里面

<asp:Content ....></asp:Content>

你可以按 F12 来检查调试时它是如何呈现的，你可以尝试使用 return false 来保持复选框的状态，在我的例子中，我试过如下：

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:checkbox ID="additem" class="additem" runat="server"/>

<script>
$('#MainContent_additem').click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
      
        if (!confirm('Are you sure you want to mark this order as received?')) {
            return false
        }
    }
    else {
       
        if (!confirm('Are you sure you want to mark this order as  not received?')) {
            return false
        }
    }
});

结果：

复选框的 id/class 属性和你设置的不一样 asp:复选框标签

在我修改了 jquery 代码后，它运行良好：

【讨论】：