Disable Dropdownlist based on Radio Button

Question

Goal:
If you select "Dates", you can select the dropdownlist for Start date and end date. If you select "All ... only" the start and end date will be grey colored in the background and you cannot click on the arrow down. These dropdownlists are disable.

Problem:
I don't know how to create it in frontend code.

Info:
*The dropdownlists are created in ASP.net MVC 4

*I'm using jquery 1.10 and bootstrap

<input id="aa" type="radio" name="searchselection" value="all" style="display: inline-block;" checked>
<label for="aa" style="width: 100px; display: inline-block; ">All ...only</label>

<input id="dates" type="radio" name="searchselection" value="dates" style="display: inline-block;">
<label for="dates" style="width: 100px; display: inline-block;">Dates</label>

@{
    DateTime myDate = DateTime.Today;

    List<SelectListItem> myListSelectListItem_YearStartDate = new List<SelectListItem>();

    for (int i = 0; i < 10; i++) {
        myListSelectListItem_YearStartDate.Add(new SelectListItem { Text = (myDate.Year - i).ToString(), Value = (i + 1).ToString(), Selected = DateTime.Today.Year == (myDate.Year - i) ? true : false });
    }
}

@Html.DropDownList("YearStartDate", myListSelectListItem_YearStartDate)

Answer 1

You could try something like

$(document).on('change', 'input[type=radio][name=searchselection]', function() {
   //func body
   ....
   if(this.value == *your choices*){
      //disable
      $(YourDropdownSelector).attr('disabled', 'disabled');
   }else {
      //enable again
      $(YourDropdownSelector).removeAttr('disabled');
   }
});

Answer 2

This is fixed in the following jsfiddle

I've stripped out some of the unneeded HTML attributes (such as the style tags - styles are better applied in css) and also stubbed out the back end code generating the <select> in order to simplify the example and focus on the solution.

Let's look at what's happened:

<select class='js-date-selector' disabled='disabled'>

Firstly, each of your select elements has been edited to add the following two attributes. The class allows targeting from javascript (or JQuery) - note that the js- prefix is not essential, it's just a nice way of keeping your javascript class attributes separate from others. Also, a class is used instead of an id, this is generally best as it is easier to re-use, as we have to in this example.

The disabled attribute is how you mark-up an HTML element so it's greyed out. If you're going to mark 'all dates' as checked on page load and 'all dates' being checked means the selects should be disabled, then your HTML also needs to mark the selects as disabled on load.

Next is the bit that does the toggling:

$('.js-all-or-dates').on('click',function() {
    var justClicked = $(this),
        dateSelectors = $('.js-date-selector');

    if (justClicked.attr('id') === 'aa') {
        dateSelectors.attr('disabled', true);
    }
    else {
        dateSelectors.attr('disabled', false);
    }    
});

Firstly, we bind a function to the click event for each of our .js-all-or-dates radio inputs.

Secondly, we assign variables, using justClicked = $(this) to store a jquery version the element that was just clicked and dateSelectors to store all of our select items, using the class mentioned above

Finally, we look at what was just clicked and if it has the ID of the 'all dates' radio input we set the disabled property on all the select elements.

Also, for good practice and smoother development: === is used for equality; $ function calls are minimised by assigning results to local variables; and the var statement contains comma separated declarations.