How to check if item is selected in a dropdownList and enable/disable a textbox if a listitem is selected/not selected

Question

I have a page where i have created a form of sorts. I have 2 dropdownlists(profilelist & salarylist).

I have 3 textboxes in this form. What i want to do:

I have 2 boxes where i create a new profile and a new salarygroup and the new profile is added to the profillist amd the salarygroup is added to the salarylist.

Now I want the third box to be disabled UNTIL an item in both the salarylis and profillist is selected. once items are selected the textbox should be enabled.

My view:

@model KUMA.Models.EmployeeCardAdminModel

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


    
        Administration KUMA
        @using (Html.BeginForm("Index", "Admin"))                   
           {
               
                   @Html.DropDownList("UserId", (SelectList)ViewBag.UserId, "--Välj anställd--") 
               
               
                    @Html.DropDownList("Salaryid", (SelectList)ViewBag.Salaryid, "--Välj LöneGrupp--")
                   
               
           }

            @using (Html.BeginForm("Kompetens", "KumaAdmin"))
            {  
                
                    Kompetenser
                     @Html.ListBox("kompetensId", (SelectList)ViewBag.KomId, new { placeholder = "Kompetenser" })


                    @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" })*@
                    


                
             }
                 @using (Html.BeginForm("Index", "KumaAdmin"))
                 {
                     
                         @* *@
                         @Html.TextBoxFor(mm => mm.Profile, new { placeholder = "Ange Profil" })                    
                         @Html.TextBoxFor(mm => mm.SalaryGroup, new { placeholder = "Ange LöneGrupp" })
                         
                     
                 }
           @*    
                 
            *@



>


Controller:

 public class AAdminController : Controller
    {
        static List list = new List();
        //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());
        }


And finally my model(note that the emplyee class is the same as my model, with the same properties but ive read that for best practice it is best to separate these.):

 public class EmployeeCardAdminModel
    {

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

    }


the way i would normaly do this is to call the desired lists and check if the selected index is larger than null but the problem is i don't know how to access the list from the controller in the correct way so i can get access to the items in it. also how can i get an id on the textboxes? I need this to be able to disable/enable the correct textbox.

Im pretty new to mvc and i learn by doing projects so all advice is appreciated. 

Thank you!

ThunD3eR · Accepted Answer

Well after some time I realized that there wasn't a good way of doing this without script.

So i solved it with jquery like this:

$(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');
        }
    })
});

view changes (added css classes):

       
           @Html.DropDownList("UserId", (SelectList)ViewBag.UserId, "--Välj profilgrupp--") 
       
       
            @Html.DropDownList("Salaryid", (SelectList)ViewBag.Salaryid, "--Välj LöneGrupp--")

Hope it helps others that attempt the same.

How to check if item is selected in a dropdownList and enable/disable a textbox if a listitem is selected/not selected

Answers (1)

Related Questions