I am having a problem with getting my JQuery javascript code to apply to the select box elements that it is supposed to. What's happening is that the select boxes are not following the actions that are specified in the javascript code. They are simply staying disabled and checked (see code below) instead of changing based on the first checkbox's selection.

I believe it is a problem regarding how I specify the location of the select boxes in the javascript code, but I don't know how to go about fixing it. Then again, I could be wrong about that too.

If you have any insight on this or can correct the code, please do! Cheers.

HTML:

<div class="medium_box">
    <form name="searchform" class="FECKsearch" method="get" onSubmit="return dosearch();">
        <input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
        <input type="submit" name="searchsubmit" class="button" value="Go" />

        <span class="searcher">International: <input type="checkbox" id="International" checked="yes"></input></span>
        <span class="searcher1">Americas: <input type="checkbox" id="Americas" disabled checked="yes"></input></span>
        <span class="searcher1">Europe: <input type="checkbox" id="Europe" disabled checked="yes"></input></span>
        Asia: <input type="checkbox" id="Asia" disabled checked="yes"></input>
    </form> 
</div>

Javascript:

$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
    $('#Americas').attr('checked', 'checked');
    $('#Americas').attr('disabled', 'disabled');
    $('#Europe').attr('checked', 'checked');
    $('#Europe').attr('disabled', 'disabled');
    $('#Asia').attr('checked', 'checked');
    $('#Asia').attr('disabled', 'disabled');
}
else {
    paramChangeBoxes.removeAttr('disabled');
    $('#Americas').removeAttr('disabled');
    $('#Europe').removeAttr('disabled');
    $('#Asia').removeAttr('disabled');

    }
});

Update & Solution:

Cheers t开发者_Python百科o John for the code $('#International').live("click",function() { which corrected the error of the JQuery code not functioning. Apparently if you are importing the code from a remote file you must include the "live" portion inside of your coding.

Thanks again John!

$('#International').live("click",function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
    $('#Americas').attr('checked', 'checked');
    $('#Americas').attr('disabled', 'disabled');
    $('#Europe').attr('checked', 'checked');
    $('#Europe').attr('disabled', 'disabled');
    $('#Asia').attr('checked', 'checked');
    $('#Asia').attr('disabled', 'disabled');
}
else {
    paramChangeBoxes.removeAttr('disabled');
    $('#Americas').removeAttr('disabled');
    $('#Europe').removeAttr('disabled');
    $('#Asia').removeAttr('disabled');

    }
});

For Dynamic content (includes and element dom creation after page load) use live. Have a nice day

There's a lot of room for tightening the following code up, but it works:

$('#International').click(function() {
    var paramChangeBoxes = $('input:checkbox');
    if ($(this).is(':checked')) {
        if (!$('#Americas').is(':checked')) {
            $('#Americas').click();
        }
        $('#Americas').attr('disabled', 'disabled');
        if (!$('#Europe').is(':checked')) {
            $('#Europe').click();
        }
        $('#Europe').attr('disabled', 'disabled');
        if (!$('#Asia').is(':checked')) {
            $('#Asia').click();
        }
        $('#Asia').attr('disabled', 'disabled');
    } else {
        paramChangeBoxes.removeAttr('disabled');
        $('#Americas').removeAttr('disabled');
        $('#Europe').removeAttr('disabled');
        $('#Asia').removeAttr('disabled');
    }
});