从 DropDownListFor 选择时禁用提交按钮

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代码：

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

没有错误消息，只是提交按钮始终处于启用状态。有帮助吗？

Answer 1

更新您的代码导致选择器使用 class 但不提交 class 所以您在 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 2

不熟悉@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 3

使用这个，它会起作用你也可以使用

 @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 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 选择时禁用提交按钮

Disable Submit button on selection from DropDownListFor

html

javascript

jquery

html.dropdownlistfor