Using JQuery with RadioButtons to hide/show table rows

Question

I have two radio buttons on my MVC form that I use to hide or show a row in a table.

It works fine in firefox, but not IE. It seems that in IE the JQuery function is only being fired when i select the first radio button. i have added extra radio buttons to confirm that it only fires on the first.

To render my buttons: <%= Html.RadioButton("Frequency", "Daily") %> Daily

and <%= Html.RadioButton("Frequency", "Weekly")%> Weekly

My function is:

$('table#ScheduleTable input#Frequency').addClass("FrequencyOption");
$('.FrequencyOption').change(function() {
    if ($(this).attr('checked') == true & $(this).val() == "Daily") {
        $('.recurEveryBox').children().show();
        $('.weekDayOption').children().hide();
    };
    if ($(this).attr('checked') == true & $(this).val() == "Weekly") {
        $('.recurEveryBox').children().show();
        $('.weekDayOption').children().show();
    }
});

Answer 1

It's be helpful if we could see the HTML source.

It could be because both of your inputs have id="Frequency". An id should be unique on the page (i.e. only one item on the page can have id="Frequency").

Answer 2

Try this

$('table#ScheduleTable input[id^="Frequency"]').change(function() {
    if ($(this).attr('checked') == true & $(this).val() == "Daily") {
        $('.recurEveryBox').children().show();
        $('.weekDayOption').children().hide();
    };
    if ($(this).attr('checked') == true & $(this).val() == "Weekly") {
        $('.recurEveryBox').children().show();
        $('.weekDayOption').children().show();
    }
});

Answer 3

Maybe if you use this reference method:

$('input[name=Frequency]').change(function() {
    if ($(this).attr('checked') == true)
{ 
    if ($(this).val() == "Daily") {
        $('.recurEveryBox').children().show();
        $('.weekDayOption').children().hide();
    }
    if ($(this).val() == "Weekly") {
        $('.recurEveryBox').children().show();
        $('.weekDayOption').children().show();
    }
}
});

Answer 4

From what I can see, this will result with two <input type="radio" id="Frequency" /> on the page. Two things with the same ID could be causing your errors. Try to eliminate that, if it is indeed occurring.

Answer 5

We had to check the length of the object before running the jQuery code. Don't know if this was the exact best way to do it... but it works and we've spent enough time! ;)

Thansk for all the help.