Question

当我们仅在用户从DropDownListFor中选择值时才会启用提交按钮，我正在处理此代码。

      @Html.DropDownListFor(m => m.Year, Model.YearList, "--Select Year--", new { @class = "form-control",id = "Year" })
      @Html.ValidationMessageFor(m => m.Year)

 <input type="submit" id="submit" name="submit" value="Submit" class="btn btn-lg btn-success" />

js code：

   $("#Year").change(function () {
        if ($('#Year').val()!="--Select Year--")
            $('.submit').prop("disabled", false);
        else
            $('.submit').prop("disabled", true);
    });

没有错误消息只是始终启用提交按钮。有什么帮助吗？

Answer 1

使用此功能，您也可以使用

 @Html.DropDownList("ddlYear", new SelectList(mylist, "Value", "Text"), "-- Select Year--", new { @class = "form-control input-sm", onchange = "Button()" })

或

@Html.DropDownList("ddlYear", ((List<SelectListItem>)ViewData["mylist"]), "-- Select Year--", new { @class = "form-control", onchange = "Button()" })

或使用DropDownListFor

 <script>
        $(document).ready(function () {
            document.getElementById("submit").disabled = true;
        })
        function Button()
        {
            if ($('#ddlYear').val() != "") {
                document.getElementById("submit").disabled = false;
            }
            else {
                document.getElementById("submit").disabled = true;
            }
        }
    </script>

    @Html.DropDownListFor(m => m.Year, Model.YearList, "--Select Year--", new { @class = "form-control", id = "ddlYear", onchange = "Button()" })
    @Html.ValidationMessageFor(m => m.Year)
    <input type="submit" id="submit" name="submit" value="Submit" class="btn btn-lg btn-success" onchange="Button()" />

Answer 2

更新您的代码原因选择器使用类但没有提交类，因此您在javascript代码中使用id选择器

$("#Year").change(function () {
    if ($('#Year').val()) {
    $('.submit').prop("disabled", false);
}
else {
    $('.submit').prop("disabled", true);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Year">
        <option value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

<input type="submit" id="submit" name="submit" value="Submit" class="btn btn-lg btn-success submit" />

Answer 3

我不熟悉@ Html.DropDownListFor;

但考虑到你的问题需求（主要是js部分）;我使用直接的html标签;

尽管如此，这个解决方案应该对你有用;

希望这会有所帮助;

let allOptions = document.querySelectorAll("#year option");
let allChoices = [];
for(i=0;i<allOptions.length;i++) {
 allChoices.push(allOptions[i].innerHTML);
}

$("#inputBox").on('keyup',function () {
	
        if (allChoices.indexOf(document.getElementById("inputBox").value) != -1)
            $('.submit').attr("disabled", true);         
        else        
            $('.submit').attr("disabled", false);        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year">
 <option>defaultvalue</option>
 <option>option1</option>
 <option>option2</option>
 </select>

<input type="text" id="inputBox"/>
 <button type="submit" id="submit" name="submit" value="Submit" class="btn btn-lg btn-success" >submit
 </button>

Answer 4

使用javascript将按钮设置为禁用，并使用onchange函数检查值：

<select id="Year" onchange = "enableButton()">
      <option value="">Select</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    <option value="4">4</option>
</select>
<input type="submit" id="submit" name="submit" value="Submit" class="btn btn-lg btn-success" disabled/>

JavaScript的：

function enableButton(){
 var year =  document.getElementById("Year").value;
 if(year == ""){
    document.getElementById("submit").disabled = true;
 }
 else{
    document.getElementById("submit").disabled = false;
 }
}

从DropDownListFor中选择禁用“提交”按钮

4 个答案: