CODEWITHSUNDEEP
jqueryasp.net-mvc
littlechris
littlechris

Reputation: 4184

Using JQuery with RadioButtons to hide/show table rows

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

Upvotes: 2

Views: 2280

Answers (5)

littlechris
littlechris

Reputation: 4184

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.

Upvotes: 0

idrumgood
idrumgood

Reputation: 4934

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.

Upvotes: 0

Emre Erkan
Emre Erkan

Reputation: 8482

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

Upvotes: 1

Francisco
Francisco

Reputation: 4101

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

Upvotes: 0

Olly Hodgson
Olly Hodgson

Reputation: 15785

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").

Upvotes: 0

Related Questions