如何在dropdownList中选中项目,如果选择/未选择列表项,则启用/禁用文本框

时间:2013-02-25 09:12:05

标签: html asp.net-mvc-4

我有一个页面,我已经创建了一种形式。 我有2个下拉列表(profilelist& salarylist)。

我在此表单中有3个文本框。我想做什么:

我有2个盒子,我在其中创建一个新的配置文件和一个新的工资组,新的配置文件被添加到profillist amd,工资组被添加到salarylist。

现在我想要禁用第三个框,直到选中了salarylis和profillist中的一个项目。选择项目后,应启用文本框。

我的观点:

@model KUMA.Models.EmployeeCardAdminModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row bgwhite">
    <div class="twelve columns">
        <h2>Administration KUMA</h2>
        <div class="row bgwhite">@using (Html.BeginForm("Index", "Admin"))                   
           {
               <div class="three columns">
                   @Html.DropDownList("UserId", (SelectList)ViewBag.UserId, "--Välj anställd--") 
               </div>
               <div class="three columns" style="margin-right:457px !important;">
                    @Html.DropDownList("Salaryid", (SelectList)ViewBag.Salaryid, "--Välj LöneGrupp--")
                   <input style="float:left;" type="submit" value="Knyt" />
               </div>
           }

            @using (Html.BeginForm("Kompetens", "KumaAdmin"))
            {  
                <div class="three columns" style="margin-right: 627px;">
                    <h6>Kompetenser</h6>
                    <div style="width:456px;"> @Html.ListBox("kompetensId", (SelectList)ViewBag.KomId, new { placeholder = "Kompetenser" })</div><br/>
                    @Html.TextBoxFor(mm => mm.Kompetens, new { placeholder = "Ange Kompetens" })
                  @*@Html.TextBoxFor(mm => mm.KompetensTest, new { placeholder = "Kompetens" })
                    @Html.TextAreaFor(mm => mm.KompetensTest, new { placeholder = "Kompetens", rows="5", cols="80" })*@
                    <input type="submit" style="margin-right: 205px;" value="Skapa"/><br/><br/>
                </div>
             }
                 @using (Html.BeginForm("Index", "KumaAdmin"))
                 {
                     <div class="three columns" style="margin-right: 627px;">
                         @* <input  name="profileTxtBox"type="text" style="width:97px; height:28px;" value="" />*@
                         @Html.TextBoxFor(mm => mm.Profile, new { placeholder = "Ange Profil" })                    
                         @Html.TextBoxFor(mm => mm.SalaryGroup, new { placeholder = "Ange LöneGrupp" })
                         <input type="submit" value="Skapa"/>
                     </div>
                 }
           @*    <div class="one columns" style=" margin-left: 100px;margin-right: 164px; margin-top: -33px;">
                 <input  name="profileTxtBox"type="submit" style="width:100px;" value="Add" />
            </div>*@
            <div class="five columns"></div>
        </div>
    </div

&GT;

控制器:

 public class AAdminController : Controller
    {
        static List<Employee> list = new List<Employee>();
        //EmployeeCardAdminModel employee = new EmployeeCardAdminModel();
        //
        // GET: /Admin/
        //[Authorize(Roles = "Admin")]

        [HttpGet]
        public ActionResult Index()
        {
            ViewBag.UserId = new SelectList(list, "Id", "Profile");
            ViewBag.Salaryid = new SelectList(list, "Id", "SalaryGroup");
            ViewBag.KomId = new SelectList(list, "Id", "Kompetens");


            ModelState.Clear();

            return View("Index");   
        }

        [HttpPost]
        // submit for profile & salary box
        public ActionResult Index(Models.EmployeeCardAdminModel e)
        {
            if (string.IsNullOrEmpty(e.Profile) == false && string.IsNullOrEmpty(e.SalaryGroup) == false)
            {
                // adda a new employye to the list and set the values from the parameter to the model
                list.Add(new Employee
                    {
                        Id = e.Id + 1,
                        Profile = e.Profile,
                        SalaryGroup = e.SalaryGroup
                    });
            }
            return (Index());
        }

        [HttpPost]
        // submit for knowledge box
        public ActionResult Kompetens(Models.EmployeeCardAdminModel e)
        {
            if (string.IsNullOrEmpty(e.Kompetens) == false)
            {
                // adda a new employye to the list and set the values from the parameter to the model
                list.Add(new Employee
                {
                    Kompetens = e.Kompetens
                });
            }
            return (Index());
        }

最后我的模型(请注意,emplyee类与我的模型相同,具有相同的属性,但我已经读过,为了最佳实践,最好将它们分开。):

 public class EmployeeCardAdminModel
    {

        public string Profile { get; set; }
        public int Id  { get; set; }
        public string SalaryGroup { get; set; }
        public string Kompetens { get; set; }

    }

我正常做的方式是调用所需的列表并检查所选索引是否大于null但问题是我不知道如何以正确的方式从控制器访问列表所以我可以访问其中的项目。我怎样才能在文本框中获得id?我需要这个能够禁用/启用正确的文本框。

我对mvc很新,我通过做项目来学习,所以我很感激所有的建议。

谢谢!

1 个答案:

答案 0 :(得分:1)

过了一段时间后,我意识到没有脚本就没有好办法。

所以我用这样的jquery解决了它:

$(function () {

    $(".list select").change(function () {
        if ($(".list1 select").val().length == 0 || $(".list2 select").val().length == 0) {

            $(".kompetensbox input").attr('disabled', 'disabled');
        }

        else {
            $(".kompetensbox input").removeAttr('disabled');
        }
    })
});

查看更改(添加了css类):

       <div class="three columns list list1">
           @Html.DropDownList("UserId", (SelectList)ViewBag.UserId, "--Välj profilgrupp--") 
       </div>
       <div class="three columns list list2" style="margin-right:457px !important;">
            @Html.DropDownList("Salaryid", (SelectList)ViewBag.Salaryid, "--Välj LöneGrupp--")
           <input style="float:left;" type="submit" value="Knyt" />
       </div>

希望它可以帮助其他尝试相同的人。