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

Question

我想禁用提交按钮，直到所有字段都有值。我见过很少有带有标签的例子。但这里我使用@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>

Answer 1

$("#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 --");
    });