Question

I’m still fairly new to javascript and I’m not finding where I’m making my mistake. The basic set up I’m working with is a set of radio buttons along with a set of check boxes. Depending on the radio button picked only a specific set of check boxes should be available the rest should be disabled/grayed out. Which check boxes are allowed for a given radio button are passed in through a php array. In my code the exclusive choices refer to the radio buttons while the extended choices refer to check boxes. My javascript and php for this functionality is as follows:

window.onload = function(){
    <?php
    for($i = 0; $i < count($students_information); $i++){
        foreach($exclusive_extended_array as $exclusive => $extended){
            echo "$('".$i."_exclusive_".$exclusive."').onclick = allow(".$i.",".json_encode($extended).");";
        }
    }
    ?>
}
function allow(i, extended){
    $('[id^="'+i+'Extended"]').disabled = true;
    for (var j = 0; j < extended.length; j++) {
        alert(extended[j]);
        $(i+"Extended"+extended[j]).disabled = false;
    }
}

On the loaded page it appears as:

<script type="text/javascript">
window.onload = function(){
    $('0_exclusive_2176').onclick = allow(0,[1975]);
    $('0_exclusive_911').onclick = allow(0,[]);
    $('0_exclusive_795').onclick = allow(0,[1973,1975]);
}
function allow(i, extended){
    $('[id^="'+i+'Extended"]').disabled = true;
    for (var j = 0; j < extended.length; j++) {
        alert(extended[j]);
        $(i+"Extended"+extended[j]).disabled = false;
    }
}
</script>

Unfortunately, what the code ends up doing is running the script when the page loads rather than when one of the radio buttons is checked. I don’t think it’s an issue with the names of the elements (though I do realize the naming style is not consistent, however, I don’t have full control over that). I’m assuming it’s just me making a simple mistake in the code and I still don’t have enough experience with javascript to catch it yet. Anyone see what I’m doing wrong?

Thank you for your time!

Answer 1

You’re assigning your click handlers like this:

$('0_exclusive_2176').onclick = allow(0,[1975]);

What’s happening is: allow is ran and its return value (undefined) is set as the event. You need to set onclick to a function:

$('0_exclusive_2176').onclick = function(){
    allow(0,[1975]);
};

You can also make allow return a function:

function allow(i, extended){
    return function(){
        $('[id^="'+i+'Extended"]').disabled = true;
        for (var j = 0; j < extended.length; j++) {
            alert(extended[j]);
            $(i+"Extended"+extended[j]).disabled = false;
        }
    };
}

Now $('0_exclusive_2176').onclick = allow(0,[1975]); should work as expected.