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 .

score 2 · Accepted Answer · answered Feb 13 '13 at 09:49

2

Check if the image is visible before toggling.

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

answered Feb 13 '13 at 09:49

Kevin Bowersox

93,289
19
159
189

suppose you should better test `#imgACiconPressed` for visibility. Latest code will return true always, as there are two images and one of them is always visible – Viktor S. Feb 13 '13 at 09:52
@FAngel What makes both images visible? I'm not following. – Kevin Bowersox Feb 13 '13 at 09:53
That is only my assumption, but take a look at IDs one is simply #imgACicon and second is #imgACiconPressed (shows "selected" state?). Suppose one of them has display none by default, and second is visible. When div is clicked, toogle will switch visibility – Viktor S. Feb 13 '13 at 10:02
@Kevin :-) Thanks a lot for this answer. However this solves only half of my problem. The other part is that, Onclick of ACicon again, the other two images should go back to thier default state display where they will not be able to take any clicks – swati Feb 13 '13 at 10:50
So if you click ACicon then it disables the toggling on the other divs? – Kevin Bowersox Feb 13 '13 at 10:52
@FAngel your assumption is totally right. The pressed(#img----Pressed ) image of every div is hidden at 1st. It toggles on click. – swati Feb 13 '13 at 10:53
@Kevin Yes Your right. OnClick of ACicon(when imgACiconPressed is seen) again, Image Toggles to imgACicon. At this juncture, imgFanLeft and imgFanRight should be displayed, disabling them from taking click events. And on click of imgACicon again (now showing imgACiconPressed ), The Previous states/ images of FanLeft and FanRight should be retained (could be anything- img-- / img---Pressed). – swati Feb 13 '13 at 11:08

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

1 Answers1