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

Question

I want to disable submit button until all the fields are having values. I have seen few examples having tags. But here I am using @Html.TextBoxFor. I have tried out something after referring to few examples online. But I am still unable to achieve the expected result. Any help please ?

Here is my html code:

   @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>

            }

Below is the script i have written to disable the submit button.

<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() is false if its value is null, so it will make the value of the attribute "disabled" to true.

In case you don't know,

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

is an internal if/else. It basically means the same as

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

I hope it will work. If not, it means that JS considers your dropdownlist basic selection as a value, so you have more checks to do between $(this).val() and the question mark, like

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