JQuery / JsPlumb: toggle "hidden/visible" anchor with checkbox starting from Hidden

Question

I've wrote something using JsPlumb Library.

I got three elements that start using

`display:none;` 

and then i use the typical Jquery code for make them appear flagging a checkbox:

input type="checkbox" id="nameCB" name="nameCB" value="on"

$('#nameCB').click(function(){
    this.checked?$('#elementID').show(1000):$('#elementID').hide(1000);

My problem is if i set an anchor for one of these elements:

jsPlumb.addEndpoint('elementID', {anchor:"BottomCenter" }, endpointOptions );

the anchor (in the default case is a gray circle) is always visible. I would like to make it visible ONLY when the element it is connected is visible.

UPDATE:

I solved creating a connection only when the checkbox is flagged an detaching it otherwise: 

$('#ckFI').click(function(){
    this.checked?$('#firenze').show(1000):$('#BBB').hide(1000);
    this.checked?apparizione():scomparsa(); 
 });
function apparizione() {
    jsPlumb.connect({
  source:"AAA", 
  target:"BBB",
  anchors:["Top", "Bottom" ],
});
}
function scomparsa() {
    jsPlumb.detach({source:"AAA", target:"BBB"});
}

Answer 1

You don't mention what is specified in your endpointOptions, so I'll just go ahead and suggest modifying your options to something like this: ["Dot", { radius: 1, cssClass: 'hidden' }], where hidden can be a class with display:none;. You could even specifying "Blank" for endpoint type, in order to keep it hidden (I haven't tried the latter but it is mentioned in documentation).

Later on when items are connected you can choose to show your connected endpoints (One way to go is with jsPlumb.getEndpoints(element) that will give you a list of endpoints for the specified element. You can navigate to connections attribute if you need to check if the endpoint has a connection on it). It generally depends on your implementation.

Hope it helps!

P.s.: Which version of jsPlumb are you currently using?