禁用提交按钮,直到所有字段都完成

时间:2017-07-27 10:00:41

标签: javascript jquery html

我正在尝试禁用提交按钮,直到完成所有字段。 我已为此编写了一个代码,但它无效。即使未在字段中输入值,也始终启用提交按钮。有什么帮助吗?以下是html代码:

$(document).ready(function () {
    validate();
    $('#Quarter, #Year, #LineID').change(validate);
});

function validate() {
    if ($('#Quarter').val()!="--Select Quarter--" &&
        $('#Year').val()!="--Select Year--" &&
        $('#LineID').val().length > 0
     {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}
<div class="row">
    <div class="col-lg-8">

        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-lg-4">Period:</label>
                <div class="col-lg-8">
                    @Html.DropDownList("Quarter", new SelectListItem[] { (new SelectListItem() { Text = "Q1", Value = "1" }), (new SelectListItem() { Text = "Q2", Value = "2" }), (new SelectListItem() { Text = "Q3", Value = "3" }), (new SelectListItem() { Text = "Q4", Value
                    = "4" }) },"--Select Quarter--", new { @class = "form-control" })
                    <br /> @Html.DropDownList("Year", new SelectListItem[] { (new SelectListItem() { Text = "2016", Value = "2016" }), (new SelectListItem() { Text = "2017", Value = "2017" }) },"--Select Year--", new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-lg-4">Line ID:</label>
                <div class="col-lg-8">
                    @Html.TextBoxFor(model => model.floorConfig.LineID, new { onkeypress = "return isNumberKey(event)", @class = "form-control" })
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-offset-4" style="padding: 10px 0px 0px 0px;">
                <input type="submit" id="submit" value="Submit" class="btn btn-lg btn-success" />
                <input type="button" id="btnCancel" value="Clear" class="btn btn-lg btn-success" />
            </div>
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分:1)

你真的错过了IF声明的结束括号吗? JS Fiddle

答案 1 :(得分:0)

我需要为季度和年份添加id。它现在有效!

相关问题