Question

I am using jQuery to convert a bunch of SELECT elements to RADIO buttons.
Then I want to change the CHECKED status of a particular RADIO button when a user clicks on a particular SELECT option. To do this, I do a few checks and set some variables.
Everything works as expected in Chrome and Firefox, but not the other browsers. Opera’s console tells me that as soon as I add “:checked” to the variable I use to check which RADIO buttons has been checked by the user, the variable is undefined (and so the rest of the function doesn’t work anymore). Here is the code I’m using for that variable:

var bedrukking = $("form#specificatie input:checked[name='staffeldim_5287\\:1192']", window.parent.document).val();

Any ideas as to why this fails? I can’t manipulate the DOM directly by the way, jQuery is my only option.

Here is the whole bit of code for changing the checked option:

// Verander Bedrukking als Papier wordt ingesteld op 90 of 80 grams wit bankpost
$("form#specificatie select#staffeldim_5285\\:1192", window.parent.document).on("change", function(){
    var papier = $(this).val();
    // 90 grams wit bankpost FSC lasergeschilkt is value 27567, 80 grams wit bankpost FSC lasergeschilkt is value 27565
    if (papier == "27567" || papier == "27565") {
        var bedrukking = $("form#specificatie input:checked[name='staffeldim_5287\\:1192']", window.parent.document).val();
        console.log(bedrukking);
        // 1 zijdig full-color is value 27579, 2 zijdig full-color is 27580
        if (bedrukking == "27579" || bedrukking == "27580") {
            // Zet de value van Bedrukking op iets anders en laat hem knipperen om aandacht te trekken
            $("form#specificatie input[name='staffeldim_5287\\:1192']:checked", window.parent.document).removeAttr('checked');
            $("form#specificatie input[name='staffeldim_5287\\:1192'][value='27583']", window.parent.document).attr('checked', 'checked').animate({opacity: 0}, 200, "linear", function() {
                $(this).animate({opacity: 1}, 200);
            });
            // Geef aan dat deze combinatie niet mogelijk is
            $('table.staffels #combinatieControle', window.parent.document).remove(); // Verwijder de waarschuwing indien hij al aanwezig is, voordat we een nieuwe toevoegen
            $("table.staffels", window.parent.document).eq(0).prepend('<tr id="combinatieControle"><td><div style="margin-bottom: 15px; color: red;">Full-color bedrukking kan niet worden gecombineerd met 80 en 90 grams wit papier. (Deze combinatie is wel mogelijk met het artikel "budget briefpapier".) Uw specificaties zijn gewijzigd.</div></td></tr>');
        }
    }
    // Deze combinatie is wel mogelijk, dus verwijder de waarschuwing indien hij aanwezig is
    else {
        $('table.staffels #combinatieControle', window.parent.document).remove();
    }
});

There’s some Dutch comments in there, hope you don’t mind. Here’s the code I use to change SELECT elements to RADIO buttons (got this from Stackoverflow):

$('form#specificatie select', window.parent.document).each(function(i, select){
    var $select = $(select);

    // Als er meer dan 10 opties zijn voor de huidige select, converteren we hem niet naar radio buttons
    var nrOptions = $(this).find('option').length;
    if (nrOptions > 10) {
        return
    }

    var counter = 1
    $select.find('option').each(function(j, option){
        var $option = $(option);
        // Create a radio:
        var $radio = $('<input type="radio" />');
        // Set name and value:
        $radio.attr('name', $select.attr('name')).attr('value', $option.val());
        // Set ID:
        $radio.attr('id', $option.val() + '_' + counter );
        // Set checked if the option was selected
        if ($option.attr('selected')) $radio.attr('checked', 'checked');
        // Insert radio before select box:
        $select.before($radio);
        // Insert a label:
        $select.before(
          $("<label />").attr('for', $option.val() + '_' + counter).text($option.text())
        );
        // Insert a <br />:
        $select.before("<br/>");

        counter++;
    });
    $select.remove();
});

Update: I tried changing jQuery versions from 1.8.1 back to 1.7.1: now everything works in all browsers except Internet Explorer 8 and 9. Why does the jQuery version make a difference and what could I try to resolve the IE issue?

Answer 1

I saw an IE 8 error expressing console.log was not defined. Removing console.log from the code fixed the issue in IE, and now it runs correctly in every browser.