javascript - 我需要禁用提交按钮，直到所有字段都具有值

我想禁用提交按钮，直到所有字段都具有值。
我见过一些带有标签的例子。但是这里我使用@ Html.TextBoxFor。我在网上参考了几个示例之后就尝试了一些方法。但是我仍然无法达到预期的结果。有什么帮助吗？

这是我的html代码：

   @using (Html.BeginForm("User", "Plan"))
            {
                <div class="row">
                    <div class="col-lg-8">
                        <p id="myElem" style="display:none; font-style:italic;background-color:yellow">Floor Plan Saved Successfully</p>
                        <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>

            }

以下是我编写的禁用提交按钮的脚本。

<script type="text/javascript">
    $(document).ready(function () {

    $("#Quarter, #Year, #LineID").keyup(function () {
        $(".submit").attr('disabled', $(this).val() && $(this).val() != "-- Select Quarter --" && $(this).val() != "-- Select Year --" ? "" : 'disabled');
    });


});
</script>

最佳答案

$("#Quarter, #Year, #LineID").keyup(function () {
    $(".submit").prop("disabled", !$("#Quarter").val() || !$("#Year").val() || !$("#LineID").val());
});

$（“＃someId”）。val（）如果值为null，则为false，因此会将属性“ disabled”的值设为true。

万一你不知道

$(this).val() ? "" : "disable")

是内部if / else。它的基本含义与

if( $(this).val()){ // if this has a value not null or empty
//"disable" attribute takes "" as value
}else{
//"disable" attribute takes "disable" as value
}

我希望它能起作用。如果不是，则表示JS将下拉列表的基本选择视为一个值，因此您需要在$（this）.val（）和问号之间进行更多检查，例如

$("#Quarter, #Year, #LineID").keyup(function () {
    $(".submit").prop("disabled", !$("#Quarter").val() || !$("#Year").val() || !$("#LineID").val() || $("#Quarter").val() == "-- Select Quarter --" || $("#Year").val() == "-- Select Year --");
    });