jQuery/asp.net - 仅在用户在文本框中输入文本并从下拉列表中选择值后启用/禁用按钮

Question

这是控件的 aspx 代码我想要在这里的功能是，当我输入文本框的值并选择一个下拉值时.. 只有在那之后才能启用按钮否则该按钮应该被禁用。

<div id="div1" class="panel-collapse collapse in">
    <div class="form-inline">
        <div class="form-group">
            <label class="control-label">Part Number:</label>
            <asp:TextBox type="text" class="form-control" ID="itemOne" runat="server" />
        </div>
        <div class="form-group">
            <label>Name:</label>
            <asp:TextBox type="text" class="form-control" ID="itemTwo" runat="server" />
        </div>
        <div class="form-group">
            <label>Price:</label>
            <asp:TextBox type="text" class="form-control" ID="itemThree" runat="server" />
        </div>
        <div class="form-group">
            <label>Weight:</label>
            <asp:TextBox type="text" class="form-control" ID="itemFour" runat="server" Style="width: 100px" />
        </div>
        <div class="form-group">
            <label>Quantity:</label>
            <asp:TextBox type="text" class="form-control" ID="miscItemQuantity" runat="server" Style="width: 80px" />
        </div>
        <div class="form-group">
            <asp:DropDownList ID="dropdownList" CssClass="form-control" runat="server" Width="150" />
            <%-- Items are added dynamically from the codebehind --%>
        </div>
        <asp:Button runat="server" ID="addItem" type="submit" Text="Add Item" CssClass="btn btn-primary pull-right"></asp:Button>
    </div>
</div>

这是我尝试使用一个文本框启用和禁用按钮的 jQuery 代码

$(document).ready(function () {
    $("#<%=itemOne.ClientID%>").keyup(function () {
        if ($(this).val().length > 2) {
            $("#<%=addItem.ClientID%>").removeAttr('disabled');
        }
        else {
            $("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
        }
    }).trigger('keyup');
});

我很高兴收到任何解决方案。

Answer 1

我认为您正在寻找类似的东西。首先为div1 中的每个TextBox 和DropDownList 添加一个监听器以检查更改。然后使用 div 验证所有控件的正确值，并相应地设置按钮可见性。

<script type="text/javascript">
    $(document).ready(function () {
        $("#div1 input[type='text']").keyup(function () {
            checkValues();
        });

        $("#div1 select").change(function () {
            checkValues();
        });

        checkValues()
    });

    function checkValues() {
        var isValid = true;

        $("#div1 input[type='text']").each(function () {
            if ($(this).val().length < 2) {
                isValid = false;
            }
        });

        $("#div1 select").each(function () {
            if ($(this).prop('selectedIndex') === 0) {
                isValid = false;
            }
        });

        if (isValid) {
            $("#<%=addItem.ClientID%>").removeAttr('disabled');
        }
        else {
            $("#<%=addItem.ClientID%>").attr('disabled', 'disabled');
        }
    }
</script>