Goal:
If the radio button ".... date(s)" is selected then the dropdownlist for start and end date will be NOT disabled.

Problem:
When you have selected and checked the radio button ".... date(s)" and then you press the search button. The radio button ".... date(s)" is checked but the dropdownlist for start and end date are disabled.

How to enable to make the dropdownlist to be active if ".... date(s)" is checked after you have pressed the search or submit button?

Information:
*If radio button is checked for "All ... only", the dropdownlist for start and end date shall be disabled.

*I'm using boostrap, jquery. asp.net mvc enter image description here CSHTML:

                Search for     

                @Html.RadioButtonFor(x => x.SelectionOfInputRadio, "all", new { id = "test", @class = "positionRadio test-or-dates", @checked = "checked" })
                <label for="all" class="labelPositionForRadio">All ... only</label>

                @Html.RadioButtonFor(x => x.SelectionOfInputRadio, "dates", new { id = "dates", @class = "positionRadio test-or-dates" })
                <label for="dates" class="labelPositionForRadio">date(s)</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 = (myDate.Year - i).ToString(), Selected = DateTime.Today.Year == (myDate.Year - i) ? true : false });
    }
}


@Html.DropDownList("YearStartDate", myListSelectListItem_YearStartDate, new { @class = "date-selector", @disabled = "disabled" })

@Html.DropDownList("YearEndDate", myListSelectListItem_YearStartDate, new { @class = "date-selector", @disabled = "disabled" })



@{
    List<SelectListItem> mySelectListItem_month = new List<SelectListItem>();

    mySelectListItem_month.Add(new SelectListItem { Text = "January", Value = "01", Selected = DateTime.Today.Month == 1 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "February", Value = "02", Selected = DateTime.Today.Month == 2 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "March", Value = "03", Selected = DateTime.Today.Month == 3 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "April", Value = "04", Selected = DateTime.Today.Month == 4 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "May", Value = "05", Selected = DateTime.Today.Month == 5 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "June", Value = "06", Selected = DateTime.Today.Month == 6 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "July", Value = "07", Selected = DateTime.Today.Month == 7 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "August", Value = "08", Selected = DateTime.Today.Month == 8 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "September", Value = "09", Selected = DateTime.Today.Month == 9 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "October", Value = "10", Selected = DateTime.Today.Month == 10 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "November", Value = "11", Selected = DateTime.Today.Month == 11 ? true : false });
    mySelectListItem_month.Add(new SelectListItem { Text = "December", Value = "12", Selected = DateTime.Today.Month == 12 ? true : false });           
}


@Html.DropDownList("MonthStartDate", mySelectListItem_month, new { @class = "date-selector", @disabled = "disabled" })

@Html.DropDownList("MonthEndDate", mySelectListItem_month, new { @class = "date-selector", @disabled = "disabled" })


@{
    List<SelectListItem> myListSelectListItem_startdate = new List<SelectListItem>();

    for (int i = 1; i <= 31; i++)
    {
        SelectListItem mySelectListItem_startdate = new SelectListItem();
        mySelectListItem_startdate.Text = i.ToString();
        mySelectListItem_startdate.Value = i.ToString();
        mySelectListItem_startdate.Selected = i.ToString() == DateTime.Today.Day.ToString() ? true : false;

        myListSelectListItem_startdate.Add(mySelectListItem_startdate);
    }
}


@Html.DropDownList("DayStartDate", myListSelectListItem_startdate, new { @class = "date-selector", @disabled = "disabled" })

@Html.DropDownList("DayEndDate", myListSelectListItem_startdate, new { @class = "date-selector", @disabled = "disabled" })


<input type="submit" value="Search" />

Javascript

<script>

    $('.test-or-dates').on('click', function () {
        var _this = $(this);

        var dateSelectors = $('.date-selector');

        if (_this.attr('id') == 'all') {
            dateSelectors.attr('disabled', true);

        }
        else {
            dateSelectors.attr('disabled', false);
        }
    });
</script>

Related posts

Recent Viewed