JQuery - Hiding a checkbox and text

Question

Hi,

I'm trying to hide an asp:CheckBox control depending on whether or not a certain link is visible on the screen. The checkbox has a text attribute = "hello". I'm trying to do this in JQuery.

I currently have the following:

$(document).ready(function(){

    hideCheckboxButtonIfLinkExists();

    }  );   

    function hideCheckboxButtonIfLinkExists() {

        var $myCheckBox = $('#<%= ckMyCheckBox.ClientID %>');
        var $myLink = $('#<%= lkMyLink.ClientID %>');

        if($myLink .is(':visible'))
        {
            $myCheckBox .show();                               
        } 
        else
        {
            $myCheckBox .hide();
        }    

    }  

When I open the page if the link is not visible then the checkbox is not visible, however the checkbox text attribute "hello" is visible.

How can I hide this also?

Thanks in advance for your help.

Answer 1

Wrap the checkbox and its text in an element and show/hide that instead. The label element is probably the best choice, since it has other advantages:

<label id="clientid-label"><input type="checkbox"> Hello</label>

Answer 2

You can show/hide the label as well like this:

var $myLabel = $myCheckBox.next('label');

if($myLink .is(':visible'))
    {
        $myCheckBox.show();
        $myLabel.show();                 
    } 
    else
    {
        $myCheckBox.hide();
        $myLabel.hide();                 
    } 
}

I'm assuming you're using ASP.NET, so the above code should do it. If your checkbox is nested within the label, then you could just show/hide the label instead.