Here is a link to a test page with the code thats flummoxing me at the moment:
http://bit.ly/eis474

OVERVIEW:
TABLE ONE:
I have a checkbox that toggles state on 2x corresponding text-fields: ticking the checkbox disables the fields, unticking removes the disabled attribute.

TABLE TWO
Below that, i have a radio group, one of which (Date) when selected will toggle state of some other corresponding text-fields.

Both of these functions work independently of each other. However, if i tick the checkbox box in the first section, it also affects the state of the other text-fields, rendering the 2nd function dead.

I need the function on the date fields to work even when the checkbox above them is ticked. I cannot figure out how in syntax of the jquery functions these two elements are conflicting.

I've been looking at this code for too long, and am perhaps in that forest-for-the-trees state where i dont think im making progress towards solving this.

REQUEST:
Can someone here look at my code and let me know what i am either doing wrong or can tweek about the code to make these 2 functions play well together?

THANKS!

JQUERY FUNCTIONS IN THE HEAD

    // actions on load
    $("#graddateMonth").attr("disabled", "disabled");
    $("#graddateYear").attr("disabled", "disabled");

    // disables & enables email fields based on state of email opt out checkbox
    $(function() {
        $("#emailoptout").click(function() {
            var satisfied = $("#emailoptout:checked").val();
            if (satisfied != undefined) 
                $("#email_pri,#email_alt").attr("disabled", "disabled");
            else 
                $("#email_pri,#email_alt").removeAttr("disabled");
            });
        });

    // disables & enables MM-YY fields based on state of grad date radio button 'date'
    $("input[name='graddate']").click(function(){
        if ($("input[@name='graddate']:checked").val() == 'date')
            $("#graddateMonth,#graddateYear").removeAttr("disabled")
        else
            $("#graddateMonth,#graddateYear").attr("disabled", "disabled")
    });

HTML CODE

<table cellspacing="0" cellpadding="0" summary="email fields">
    <tr>
        <td>Primary Email:</td>
        <td><input type="text" name="email" id="email_pri" class="text_175" maxlength="50" value="currentemail@currentdomain.com" /></td>
    </tr>
    <tr>
        <td>Alternate Email:</td>
        <td><input type="text" name="email_alt" id="email_alt" class="text_175" maxlength="50" value="alternate@currentdomain.com" /></td>
    </tr>
    <tr>
        <td>Opt Out of Email Contact:</td>
        <td><input type="checkbox" name="emailoptout" id="emailoptout" /></td>
    </tr>
</table>

<br />

<table cellspacing="0" cellpadding="0" summary="grad fields">
    <tr>
        <td>Grad Date:</td>
        <td>
            <input type="radio" name="graddate" value="grad" id="grad_grad" />Grad
            <input type="radio" name="graddate" value="na" id="grad_na" />N/A
            <input type="radio" name="graddate" value="date" id="grad_date" />Date
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td id="grad_date_fields">
            <input type="text" id="graddateMonth" class="date2" maxlength="2" value="mm" />    - <input type="text" id="graddateYear" class="date2" maxlength="2" value="yy" />
        </td>
    </tr>
</table>

Is $("#graddateMonth,#graddateYear") selecting both? I usually write it like this: $("#graddateMonth").add("#graddateYear")

RESOLVED

The issue was the @ symbol in the following line:

$("input[@name='graddate']:checked").val() == 'date'

After digging around in the jQuery 1.3 release notes, i found this syntax has been depreciated and no longer works. Removing the @ symbol caused my page to behave as intended.

Thanks for reading.