ASP.NET MVC 4驗證後，自定義jQuery腳本無法正常工作

Question

我正在使用jQuery根據Dropbox（＃Drop1）中的選擇啓用和禁用兩個單獨的文本框輸入及其標籤。這裏是我的jQuery腳本：

$(function() { 
    $("#Drop1").change(function() { 
     if ($(this).val() == "IWR") { 
      ShowOther() 
     } 
     else { 
      ShowIWR() 
     } 
    }); 
}); 

$(function() { 
    $("#Drop1").ready(function() { 
     if ($(this).val() == "IWR") { 
      ShowOther() 
     } 
     else { 
      ShowIWR() 
     } 
    }); 
}); 

function ShowOther() { 
    $("#Job").attr("disabled", "disabled").css({ "background-color": "#999", "display": "none" }); 
    $("#job_row").css({ "display": "none" }); 
    $("#Project").removeAttr("disabled").css({ "background-color": "#EFF8FB", "display": "block" }); 
    $("#proj_row").css({ "display": "block" }); 
} 

function ShowIWR() { 
    $("#Job").removeAttr("disabled").css({ "background-color": "#EFF8FB", "display": "block" }); 
    $("#job_row").css({ "display": "block" }); 
    $("#Project").attr("disabled", "disabled").css({ "background-color": "#999", "display": "none" }); 
    $("#proj_row").css({ "display": "none" }); 
} 

在頁面加載時，一切按預期工作。當我改變保管箱時，正確的文本框及其輸入顯示和隱藏就像我期望的一樣。看看我的代碼，你可以看到ID #Job和#job_row應該是可見的，而#Project和#proj_row是隱藏的，反之亦然。當使用GET（）加載頁面時，與作業相關的標籤和文本框是可見的。

我遇到的問題是在我選擇顯示#Project和#proj_row（Drop1.val =「IWR」）的下拉列表後，如果驗證程序捕獲的頁面上有錯誤，頁面無法加載正確備份。 #Job和#job_row是可見的，即使在重新加載Drop1.val仍然=「IWR」。

萬一有幫助，這是我的控制器代碼：

[HttpPost] 
    public ActionResult Create(QCLog qclog) 
    { 
     if (qclog.Job == null) 
     { 
      if (qclog.Type != "IWR") 
      { 
       ModelState.AddModelError("Job", "Job is required unless it is an IWR."); 
      } 
      else 
      { 
       if (qclog.Project == null) 
       { 
        ModelState.AddModelError("Project", "Project is required for IWRs."); 
       } 
      } 
     } 

     if (ModelState.IsValid) 
     { 
      if (qclog.Job != "IWR") 
      { 
       string[] qcjob = qclog.Job.Split('-'); 
       int temp = Convert.ToInt32(qcjob[0]); 
       try 
       { 
        var job = jobdb.Server5_Job.Single(j => j.Job == temp); 
        qclog.Project = job.ProjectID; 
        qclog.Blend = job.BlendLot; 
       } 
       catch (Exception ex) 
       { 
        qclog.Project = null; 
        qclog.Blend = null; 
       } 

      } 
      else 
      { 
       qclog.Project = null; 
       qclog.Blend = null; 
      } 
      qclog.Timestamp = DateTime.Now; 
      qclog.Status = "Incomplete"; 
      db.QCLogs.AddObject(qclog); 
      db.SaveChanges(); 
      //PrintLabel(qclog); 
      return RedirectToAction("Index"); 
     } 
     return View(qclog); 
    } 

這裏是頁的查看源代碼，錯誤校驗後：

<tr class="transparent"> 
        <td class="transparent"><select id="Drop1" name="Type"><option value="FPI">FPI</option> 
<option selected="selected" value="IWR">IWR</option> 
<option value="Final">Final</option> 
<option value="SMS">SMS</option> 
<option value="Incoming">Incoming</option> 
<option value="GageRR">Gage R+R</option> 
<option value="Other">Other</option> 
</select> 
        </td> 
        <td class="transparent"><span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true"></span> 
        </td> 
       </tr> 
       <tr class="transparent"> 
        <td class="transparent"> 
         Operation 
        </td> 
        <td class="transparent"> 
        </td> 
       </tr> 
       <tr class="transparent"> 
        <td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="Operation field cannot contain more than 3 characters." data-val-length-max="3" data-val-required="Operation required." id="Operation" name="Operation" type="text" value="020" /> 
        </td> 
        <td class="transparent"><span class="field-validation-valid" data-valmsg-for="Operation" data-valmsg-replace="true"></span> 
        </td> 
       </tr> 
       <tr id="proj_row" class="transparent"> 
        <td class="transparent"> 
         Project (ex. 0730A) 
        </td> 
        <td class="transparent"> 
        </td> 
       </tr> 
       <tr class="transparent"> 
        <td class="transparent"><input class="input-validation-error text-box single-line" id="Project" name="Project" type="text" value="" /> 
        </td> 
        <td class="transparent"><span class="field-validation-error" data-valmsg-for="Project" data-valmsg-replace="true">Project is required for IWRs.</span> 
        </td> 
       </tr> 
       <tr id="job_row" class="transparent"> 
        <td class="transparent"> 
         Job Number (ex. 12345-1) 
        </td> 
        <td class="transparent"> 
        </td> 
       </tr> 
       <tr class="transparent"> 
        <td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="Job field cannot contain more than 10 characters." data-val-length-max="10" id="Job" name="Job" type="text" value="" /> 
        </td> 
        <td class="transparent"><span class="field-validation-valid" data-valmsg-for="Job" data-valmsg-replace="true"></span> 
        </td> 
       </tr> 

我的道歉提前如果我的代碼並不像它可能的那樣高效。我是一個後端的人，仍然會得到前端框架的結局。

感謝您的幫助。

Answer 1

我想通了。用相反的：

$(function() { 
    $("#Drop1").ready(function() { 
     if ($(this).val() == "IWR") { 
      ShowOther() 
     } 
     else { 
      ShowIWR() 
     } 
    }); 
}); 

我不得不使用文件準備功能，例如：

$(document).ready(function() { 
    if ($("#Drop1").val() == "IWR") { 
     ShowOther() 
    } 
    else { 
     ShowIWR() 
    } 
}); 

這實現我一直在尋找的效果。我只能假定當控件準備好時，「＃Drop1」的值沒有設置，但是在文檔準備就緒後設置。