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

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

来源

2017-07-27 beginner

为什么？只需将验证属性添加到您的属性并启用客户端验证，以便如果表单无效，则会显示错误消息并提交将被取消 –

您可以给我一些示例代码吗？谢谢 – beginner

[添加验证]（https://docs.microsoft.com/en-us/aspnet/mvc/overview-getting-started/introduction/adding-validation） –

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

$（ “＃someId”）。VAL（）是假的，如果它的值是零，那么就会使属性 “已禁用”，以真实的价值。

如果你不知道，

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

来源

2017-07-27 04:33:45 koesys

我尝试了两个选项。这不适用于我 – beginner

我甚至用代码更改更新了我的问题。提交按钮仍未被禁用。 – beginner

通常，当涉及复选框或选择时，attr可能无法正常工作，因此请使用prop，例如：$（“。myCheckbox”）。prop（“checked”，true）。它甚至适用于只读输入$（“＃someInput”）。prop（“readonly”，false） – koesys

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

回答

相关问题