Enable and Disable the div to take click events on click of a div

Question

I Have few divs in my code as shown below

 <div id="Toggle_ACicon">
       <img id = "imgACicon" src = "../images/Zone4/Z4_Ac-Button-released.png">
       <img id = "imgACiconPressed" src = "../images/Zone4/Z4_Ac-Button-pressed-hi.png">
    </div>

    <div id="Toggle_FanLeft">
       <img id = "imgFanLeft" src = "../images/Zone4/Z4-Fan-Dial-left-released.png">
       <img id = "imgFanLeftPressed" src = "../images/Zone4/Z4-Fan-Dial-left-pressed-hi.png">
    </div>

    <div id="Toggle_FanRight">
       <img id = "imgFanRight" src = "../images/Zone4/Z4-Fan-Dial-right-released.png">
       <img id = "imgFanRightPressed" src = "../images/Zone4/Z4-Fan-Dial-right-pressed-hi.png">
    </div>

The two images in every div is to display for default state and clicked state on every click of that div. Below code does it for every div (toggling on clicks)

$("#Toggle_FanRight").click(function()
{
    $(this).find('img').toggle();
});

my requirement is that, Toggle_FanLeft and Toggle_FanRight should take click events only when Toggle_ACicon is selected, else the click on them should be disabled. One click on Toggle_ACicon should make them active and enable them to take click events.

Please help me !! Thanks in advance .

Answer 1

Check if the image is visible before toggling.

$("#Toggle_FanRight").click(function()
{
    if($("#Toggle_ACicon").find("img").is(":visible")){
       $(this).find('img').toggle();
    }
});