1

我正在使用 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" });
}

在页面加载时，一切都按预期工作。当我更改 Dropbox 时，正确的文本框及其输入会像我预期的那样显示和隐藏。查看我的代码，您可以看到 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>

如果我的代码没有达到应有的效率，我提前道歉。我是一个后端人员，仍在了解前端框架的目的。

谢谢您的帮助。

4

1 回答 1

1

我想通了。而不是使用：

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

我必须使用文档准备功能，如下所示：

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

这样就达到了我想要的效果。我只能假设“#Drop1”的值在控件准备好时没有设置，而是在文档准备好后设置的。

于 2013-05-13T12:19:05.587 回答