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

使用この、それはあなたにも

@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

を使用してを使用することができます動作します

Answer 2

あなたのコードの原因セレクタの使用クラスを更新していないが、私は、@ Html.DropDownListForに精通していないです、あなたのjavascriptのコード

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

であなたのidセレクタので何クラスを提出します。

しかし、あなたの質問の需要（主に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() { 
 
\t 
 
     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

あなたは無効として、ボタンを設定し、値をチェックするためのonchange関数を使用してJavaScriptの使用：

<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; 
} 
}