Question

**我想在选择“--Select--”列表项时禁用按钮** 这是我的完整代码。

我使用验证ValidationGroup =“AddUser”并绑定Button，下拉列表和文本框。

我尝试了很多，但我找不到我的解决方案，请帮忙。

提前致谢。

  <div class="form-group">
    <div class="col-sm-3">
      <label>User Name</label>
       <asp:TextBox ID="tbUser" class="form-control" runat="server" placeholder="Enter Username" OnTextChanged="tbUser_TextChanged"></asp:TextBox>
        <asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="User" ValidationExpression="^[a-zA-Z0-9]{4,16}$" runat="server" ErrorMessage="Username must contain minimum 4,Max 16 characters." Style="color: darkred;"></asp:RegularExpressionValidator>
         <asp:RequiredFieldValidator  runat="server" ControlToValidate="User" >
         <div style="color:darkred;">
           <span class="fa fa-exclamation-circle" style="color:darkred">
           </span>
         </div>

        </asp:RequiredFieldValidator>

      </div>

    <div class="col-sm-2">
   <label>Role</label>
   <asp:DropDownList ID="Role" class="form-control" runat="server" OnSelectedIndexChanged="ddlRole_SelectedIndexChanged">
     <asp:ListItem Value="0">---Select---</asp:ListItem>
     <asp:ListItem Value="1">User</asp:ListItem>
     <asp:ListItem Value="2">Admin</asp:ListItem>
    </asp:DropDownList>

   <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
      ControlToValidate="ddlRole"                                             
       ErrorMessage="Conform your password." >
   <div style="color:darkred;">
     <span class="fa fa-exclamation-circle" style="color:darkred"></span>
   </div>
   </asp:RequiredFieldValidator>

  </div>


  <div class="col-sm-2">
    <label></label>
   <br />

   <asp:Button ID="btnAdd" runat="server" CssClass="btn btn-primary" class="form-control" Width="100%" Text="Add" OnClick="btnAdd_Click" ></asp:Button>
    </div>
   </div>

Answer 1

试试这个，它会对你有所帮助。在页面加载后，禁用btnAdd按钮，用户在下拉列表中选择任何listitem值，启用btnAdd按钮除了--Select--。如果用户选择listitem --Select--。 btnAdd禁用

HTML

<body onload="Page_Load()">
    <form runat="server">
        <asp:DropDownList runat="server" ID="Role" OnChange="Role_SelectedIndexChanged()">
            <asp:ListItem Value="0">--Select--</asp:ListItem>
            <asp:ListItem Value="1">User</asp:ListItem>
            <asp:ListItem Value="2">Admin</asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="btnAdd" runat="server" />
    </form>
</body>

的JavaScript

 $(document).ready(function () {
            $("#Role").click(function () {
                if ($(this).val() == "0") {
                    $("#btnAdd").prop("disabled", true);
                }
                else {
                    $("#btnAdd").removeProp("disabled");
                }
            });

        });  

 function Page_Load() {
            $("#btnAdd").prop("disabled", true);
        }

Answer 2

如果绑定到下拉列表的onchange事件，然后检查该值并根据值禁用或启用该按钮。

$(document).ready(function() {
    $("#Role").on("change", function() {
       if ( $(this).val() == "0" ) {
           $("#btnAdd").prop("disabled",true);
        }
        else {
           $("#btnAdd").removeProp("disabled");
          }
   });

});

Answer 3

由于这是ASP.Net控件，因此您可以添加onchange事件，您可以在其中调用javascript函数并检查这样的值，

<asp:DropDownList ID="Role" class="form-control" runat="server" 
  OnSelectedIndexChanged="ddlRole_SelectedIndexChanged" 
  onchange="myFunction()">
    <asp:ListItem value="0">--Select--</asp:ListItem>
    <asp:ListItem value="1">User</asp:ListItem>
    <asp:ListItem value="2">Admin</asp:ListItem>
</asp:DropDownList>

然后在你的js中，

<script type="text/javascript">
  function myFunction()
  {
     var drpdwn = document.getElementById("Role");
     if(drpdwn.options[drpdwn.selectedIndex].value == 0)
        $('#btnAdd').attr('disabled', 'disabled');
     else
        $('#btnAdd').attr('disabled', false);
  }
</script>

希望有所帮助：）

Answer 4

Asp代码：

 <asp:DropDownList ID="Role" class="form-control" runat="server" onchange="ddlRole_SelectedIndexChanged()">
     <asp:ListItem Value="0">---Select---</asp:ListItem>
     <asp:ListItem Value="1">User</asp:ListItem>
     <asp:ListItem Value="2">Admin</asp:ListItem>
    </asp:DropDownList>

 <asp:Button ID="btnAdd" runat="server" CssClass="btn btn-primary" class="form-control" Width="100%" Text="Add" OnClick="btnAdd_Click" ></asp:Button>

js file：

 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> // add this between `head` tag

脚本：

 $(document).ready(function () {
            document.getElementById("btnAdd").disabled = true;

        });

        function ddlRole_SelectedIndexChanged() {

        // Gets your select  value
        var list = document.getElementById("Role").value;

        if(list==0)
        {
             document.getElementById("btnAdd").disabled = true;
        }
        else {
            document.getElementById("btnAdd").disabled = false;
        }
    }

希望!!。它有帮助

Answer 5

在我的代码后面（c＃）页面加载＆amp;按钮我把这个代码放在下面，并在.aspx下面的dropdownlist中添加AutoPostBack =＆＃34; true＆＃34;看看@ user688＆amp; @ User6667769正在运作

protected void Page_Load(object sender, EventArgs e)
{   
    btnAdd.Enabled = false;
}protected void ddlRole_SelectedIndexChanged(object sender, EventArgs e)
{
    btnAdd.Enabled = true;
}

Answer 6

你不需要 jQuery 甚至 JS 来处理这个。只需使用您的代码。

protected void Role_SelectedIndexChanged(object sender, EventArgs e)
{
    btnAdd.Enabled = Role.SelectedItem.Value != 0;
}

并将 AutoPostBack="true" 添加到您的下拉列表中。

<asp:DropDownList ID="Role" class="form-control" runat="server" 
    OnSelectedIndexChanged="Role_SelectedIndexChanged" AutoPostBack="true">
  <asp:ListItem Value="0">---Select---</asp:ListItem>
  <asp:ListItem Value="1">User</asp:ListItem>
  <asp:ListItem Value="2">Admin</asp:ListItem>
</asp:DropDownList>

<asp:Button ID="btnAdd" runat="server" CssClass="btn btn-primary" class="form-control" Width="100%" Text="Add" OnClick="btnAdd_Click" ></asp:Button>

如何在选择特定下拉列表项之前禁用提交按钮？

6 个答案: