Question

Both of the below functions (which are identical except for when they should run) are in $(document).ready. The .live version works as expected, hiding 2 divs when the selector is checked and showing them when it is unchecked. The .ready version does nothing but it is supposed to hide the specified divs when the page is loaded. The checkbox ‘allday’ is checked by default (for testing purposes).

What is wrong with the .ready version?

$("input[name='allday']").ready(function(){ //OnLoad verify if allday is checked to disallow time entry
    if($(this).is(":checked")){ //There is a check
        $("#evst").hide(); //hide time entry
        $("#evet").hide();
    } else {
        $("#evst").show(); 
        $("#evet").show();
    }; 
}); 

$("input[name='allday']").live("click", function(){ //OnClick verify if allday is checked to disallow time entry
    if($(this).is(":checked")){ //There is a check
        $("#evst").slideUp(); //hide time entry
        $("#evet").slideUp();
    } else {
        $("#evst").slideDown(); 
        $("#evet").slideDown();
    }; 
});

Answer 1

When you use .ready $(this) won’t refer to the right element – change it to $("input[name='allday']")