Question

Possible Duplicate:
jQuery Browser Compatability (IE)

I would initially post some code snippets (and will if you request it), but I think this problem would be easier to identify if you follow this link and check out my problem firsthand. And, the code snippets could get rather lengthy.

Link: http://www.thesportinghub.com/lms/make-my-picks

If you open up this page in Google Chrome, IE9, Firefox 5.0+, or Safari, and if you click around a bit, you will notice how this page is INTENDED to function. It is working PROPERLY and PERFECTLY as I have drawn up in these browsers.

The problem I am facing is with jQuery compatability. When you select a radio button (while in one of the aforementioned browsers), it will cross out that respective team and disable the remaining radio buttons for that team throughout the rest of the weeks. You should see it cross out in two places in the “working” browsers.

However, jump to IE7 and IE8 and you will notice the same is not the case. I have looked up and down my code for basic syntax errors and have searched the web endlessly to solve this. I would much appreciate anyone’s assistance with this.

I am willing to provide more information, code snippets, and be actively involved in trying to solve this issue I am having.

UPDATE WITH CODE:

<script type="text/javascript">
$(document).ready(function(){

$('.radio:checked').addClass("selected");
$('.pickbox').text($('.radio:checked').val());

var selected_week = $('#weekselect').val();

$('table.weekbox').hide();
$('table#weekbox' + selected_week).show();
$('span.selection.text').html('<br/>My Week ' + selected_week + ' Selection:');


    $('input.radio').change(function () {
        $('.teambox').find('span.strike').removeClass('strike');
        var selected = $(this).val();
        var us_selected = selected.replace(/ /g, "");

        $('.radio:not(:checked)').removeClass('selected');
        $('.radio:not(:checked)').next('span').css('color','');
        $('.radio:not(:checked)').removeAttr('disabled');
        $('.radio:checked').addClass('selected');
        $('.pickbox').text($(this).val());
        $('.pickbox').css('border','3px dashed #88cc33');
        //$('.pickbox').text($('.teambox').find('span.' + us_selected).text());
        $('.teambox').find('span.' + us_selected).addClass('strike');

    $('.selected').each(function () {
    var selected_team = $(this).val();
    var x_selected_team = selected_team.replace(/ /g, "");
    $('.teambox').find('span.' + x_selected_team).text(selected_team).addClass('strike');
    $('table.weekbox').find('td input[value="' + selected_team + '"]').attr('disabled', 'disabled');
    $('.selected').next('span').css('color','#88cc33');
    });
        });


  $('#weekselect').change(function () {
    var selected_week = $('#weekselect').val();

    if ($('input[name="Week' + selected_week + '"]').is(':not(:checked)')) {
        $('table.weekbox').hide();
        $('table#weekbox' + selected_week).show();
        $('span.selection.text').html('<br/>My Week ' + selected_week + ' Selection:');
    $('.pickbox').css('border','1px dashed #FFFFFF');
    $('.pickbox').text('');
    }

        $('table.weekbox').hide();
        $('table#weekbox' + selected_week).show();
        $('span.selection.text').html('<br/>My Week ' + selected_week + ' Selection:');
        $('input:not(:checked)').next('span').removeClass('strike');
        $('input[disabled]:not(:checked)').next('span').addClass('strike');

    $('.pickbox').text($('input.radio[name="Week' + selected_week + '"].selected').val());

    if ($('.pickbox').text() != "") {
        $('.pickbox').css('border','3px dashed #88cc33');
    }

    $('.selected').each(function () {
    var selected_team = $(this).val();
    var x_selected_team = selected_team.replace(/ /g, "");
    $('.teambox').find('span.' + x_selected_team).text(selected_team).addClass('strike');
    });

});
});
</script>

There is my jQuery script… Someone has mentioned my IE problems are because my radio buttons are not being read from the .change function, and that it needed to be .click…

Answer 1

Your problem is that you are using change on the radio buttons instead of click. IE needs the radio buttons to blur before firing the change event. Also, be very careful using spaces in your element IDs.