Disable second button onclick event, if first button is clicked.

[Anonymous]

I have two buttons performing two different things but in the same way. If i click the first button an animation happens and to undo the animation you must click the same button once more. But if the user clicks the second button instead of the first one, the other animation for that second button happens, without undoing the first animation and everything goes nuts. So if a user clicks the first button, how do i disable the second button from being clicked until the user clicks that same button once again to undo the animation, and then the second button click is re-enabled?

EDIT: and of course this would need to happen both ways.

[CrocoDillon]

I’d do something like (assuming jQuery):

var current;
$(‘.first’).click(function() {
if (current == null) {
current = this;
// start animation
} else if (current == this) {
// undo animation
current = null;
}
});
// same with $(.second’)

Storing the Element that was clicked as reference so you know what animation is ‘active’.

[Anonymous]

[email protected] That didn’t work, not sure if i did it wrong or if it just doesn’t work :P

[CrocoDillon]

Probably me, didn’t test it :P I’ll go do that now

[Anonymous]

@srig99 That also didn;t work. I should have mentioned that it’s not an actual button

it’s an image with an onclick event handler

[CrocoDillon]

http://codepen.io/CrocoDillon/pen/LAwFl

does work, should work with any element… just went with buttons because @srig99 did :P

Note you can’t use jQuery objects to compare if the same element is clicked. `$(this) == $(this)` will return false.

[Anonymous]

Here you go. Sorry it’s so messy. One button should be unclickable when the other is clicked once, when i’ts clicked twice, the other should be clickable. Scroll down a bit to see the buttons. ;lkbjvk http://codepen.io/Jarolin/pen/agmkf

EDIT: you can get a better view of what’s going on here http://reallycoolstuff.net/PROJECTS/harol/index.html in “About Me” section

[pixelgrid]

have a go with this one http://codepen.io/anon/pen/txvAI

[Senff]

I would use some elements to emulate fake disabled buttons: http://www.codepen.io/senff/pen/FBkyA

[Anonymous]

None of these are working and i’m sure it’s because of idiot me.

@pixelgrid What i did with your code was just replace the class names with my class names and not even that worked.

@senff Your code confused me alittle, but it didn’t work either way.

[Senff]

Did you load the jQuery library on your page? I don’t see it anywhere on the page you gave us as an example (http://reallycoolstuff.net/PROJECTS/harol/index.html), and all solutions posted here require that to work.

If you don’t have it, add this line in the HEAD section of your site and try again:

[Anonymous]

@Senff I have other jQuery code working fine so everything must be loading fine. I don’t understand why these don’t work.

[Senff]

Ok, then can you use one of the examples above (take @pixelgrid’s latest one for example) and use it on an actual page so we can check what might be the problem?

[pixelgrid]

all of the code posted here just disable the buttons as the title suggested,on each function though while disabling or enabling a button you have to slide the content you want to show ,cant work by itself

[Anonymous]

I figured out the problem. Apparently @Pixelgrid’s code only works if the button images with the onclick are made into actual button tags even when i matched the class names in both the jquery and image tags. If my images have the class as in the jquery code it wouldn’t work. @PixelGrid would you mind making it so that it also accepts the img tags with the class

[Author]

Posts