Question

目前我正在使用

<asp:ListBox ID="UserListBox" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>

默认情况下，该按钮处于禁用状态，在OnSelectedIndexChanged被触发后，我正在执行此操作。

protected void UserListBox_SelectedIndexChanged(object sender, EventArgs e)
{
    loginBtn.Enabled = true;
}

这导致网站重新加载。我不想要那个，而是我需要javascript，但我不熟悉。

Answer 1

解决问题的一种有用方法是使用更新面板：

<asp:UpdatePanel runat="server">
<ContentTemplate>
    <asp:ListBox ID="UserListBox" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
</ContentTemplate></asp:UpdatePanel>

...

<asp:UpdatePanel runat="server">
<ContentTemplate>
    <asp:ListBox ID="loginBtn" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="UserListBox" EventName="SelectedIndexChanged" />
</Triggers></asp:UpdatePanel>

Answer 2

@Marco的回答肯定更符合您在Web窗体世界中寻找的内容，但如果您开始使用JavaScript，请从以下开始：

document.getElementById("loginBtn").disabled = true;

这假设您已经为登录按钮指定了固定ID，并且ASP.NET不会自动分配疯狂的内容。

您必须删除服务器端事件处理程序UserListBox_SelectedIndexChanged并将其替换为JavaScript事件处理程序，否则该按钮将被JavaScript禁用，但页面将重新加载并撤消禁用。如果你在该方法中有任何其他服务器端代码，则需要找到一个新的家，或者你必须开始真正地攻击它。

这样的原因是为什么能够坚持使用单一范例很好 - 无论是服务器端Web窗体还是客户端JavaScript。避免混合和匹配，除非绝对必要 - 它可行，但会有泪水和漫长的夜晚。

Answer 3

使用javascript的解决方案：

<script>
function checkSelect() {
    if (document.getElementById('<%=UserListBox.ClientID %>').value != '')
        document.getElementById('<%=loginBtn.ClientID %>').disabled = false;
}
</script>

在</asp:content>之前，我的列表框现在也是：

<asp:ListBox ID="UserListBox" runat="server" onchange='checkSelect(this);'></asp:ListBox>

Answer 4

您好，您可以简单地使用jquery来实现相同的目的，请考虑以下示例

<div>
            <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
                <asp:ListItem Text="Mango" Value="1"></asp:ListItem>
                <asp:ListItem Text="Apple" Value="2"></asp:ListItem>
                <asp:ListItem Text="Banana" Value="3"></asp:ListItem>
                <asp:ListItem Text="Guava" Value="4"></asp:ListItem>
                <asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
                <asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
                <asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
            </asp:ListBox>
            <asp:Button ID="btnLogin" runat="server" Text="Login" Enabled="false"/>
        </div>

并在jquery的$（document）.ready事件中注册选择列表的更改事件，如下所示

<script type="text/javascript">            
            $(document).ready(function () {                
                $('select[id*=ListBox1]').change( function () {
                    if($('select[id*=ListBox1] :selected').length >0)
                        $('#<%= btnLogin.ClientID%>').prop('disabled', false);
                    else
                        $('#<%= btnLogin.ClientID%>').prop('disabled', true);
                });
            });
        </script>

对任何问题发表评论，享受!!

选中ListBox中的项后启用按钮

4 个答案: