Toggling between two onclick functions

Question

I have created two buttons in HTML and I have written some jQuery so that when the user clicks one of the button, a new CSS rule will be applied to that button. This code works below:

$('#approve').on('click', function(){
    $('#approve:hover').css("background-color", "#24ce3a")
    $('#approve:hover').css("color","#FFF")
});
$('#reject').on('click', function(){
    $('#reject:hover').css("background-color", "#e32e10")
    $('#reject:hover').css("color", "#FFF")
});

If #approve is clicked, I want to give it a new color and disable the #reject button. The next time #approve is clicked, I want to reset to the original styling, and re-enable the #reject button. The #reject button should have similar behavior: toggle it's own state when clicked, and disable the #approve button while it's active.

Any ideas how I can accomplish this?

So? what's the difference? Can't you simply use it the way it's meant to be used? `$(this)` without the `:hover` (unexistant selector AFAIK) — Roko C. Buljan, Nov 02 '14 at 20:21
@GhostDZ9 What exactly do you mean by "I don't want #reject to toggle"? What do you want to happen when a button is clicked? If I click `#approve` what happens to that button? And what happens to the other one? What happens if I click it again? This isn't really clear from your question... — nbrooks, Nov 02 '14 at 20:21
@nbrooks +1 I was writing the same. It's not clear at all should the buttons toggle on them selves, or simply do a one-time click-pick bye-bye. — Roko C. Buljan, Nov 02 '14 at 20:22
@nbrooks Its basically like a switch if one is click the other button shouldn't be clickable. — GhostDZ9, Nov 02 '14 at 20:24
@GhostDZ9 ok, but what after? what should happen if one clicks again the same button? Sould it go back-to-normal? — Roko C. Buljan, Nov 02 '14 at 20:26
@RokoC.Buljan yes it should go back to its normal state without the css being applied — GhostDZ9, Nov 02 '14 at 20:27
Food for thought: http://ux.stackexchange.com/questions/39080/buttons-instead-of-radio-buttons-or-a-dropdown?newreg=30a9aab6cc0f4f3688d17ed98cee81ae (see the top two answers in particular) — Troy Gizzi, Nov 02 '14 at 20:37
@GhostDZ9 I'd really go with classic radio buttons or at least with the exact behavior they apply. — Roko C. Buljan, Nov 02 '14 at 20:49
@GhostDZ9 Please realize that if you take away the user's ability to click the other button after they've already clicked one, they are going to be frustrated and unhappy when they try to change their selection. I strongly encourage you to rethink your design. The approach that Roko just suggested (_go with classic radio buttons or at least with the exact behavior they apply_) is much better than what you're attempting to do here. — Troy Gizzi, Nov 02 '14 at 20:51

nbrooks · Accepted Answer · 2014-11-02T20:41:50.420

When one of the callback functions is triggered, have it disable the other one by adding a class to it. The next time it's clicked, re-enable the button by removing the class.

var approveFunc = function() {
  if ($(this).is(".disabled")) {
    return;
  }
  $(this).toggleClass("active");
  $("#reject").toggleClass("disabled");
};

var rejectFunc = function() {
  if ($(this).is(".disabled")) {
    return;
  }
  $(this).toggleClass("active");
  $("#approve").toggleClass("disabled");
};

$('#approve').on('click', approveFunc);
$('#reject').on('click', rejectFunc);

div {
  color: blue;
  background-color: pink;
}
#approve.active {
  background-color: #24ce3a;
  color: #FFF;
}
#reject.active {
  background-color: #e32e10;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="approve">Approve</div>
<div id="reject">Reject</div>

This nearly works, Approve works as expected but reject doesn't. — GhostDZ9, Nov 02 '14 at 20:42

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Just as different approach - Fiddle

$(document).on('click', 'button', function () {
  if ($(".selected").length === 0 | $(this).hasClass("selected"))
  {
    $(this).toggleClass("selected");
  }
});

Instead of changing the inline css I've added the class selected.

As mentioned in the comments, the check for elements with the class selected should be narrowed down according to the actual markup to avoid unwanted results. E.g. in case both buttons are in a div with an id="testing" it could be $("#testing .selected").length to only check for the elements in question.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 02 '14 at 20:35

matthias_h

11,356
9
22
40

UX concern: If a user clicks one button, and then they change their mind and try to click the other, but find out they can't, they're going to get frustrated. It's not intuitive that you need to re-click the first button before you can then click the other button. – Troy Gizzi Nov 02 '14 at 20:40
@TroyGizzi on that matter you're completely right! They should behave like radio buttons, if there's a concern about design than: http://stackoverflow.com/questions/17541614/use-thumbnail-image-instead-of-radio-button/17541916#17541916 – Roko C. Buljan Nov 02 '14 at 20:41
@TroyGizzi Thanks for mentioning, share the concern, but that's how I understood the requirement of OP. – matthias_h Nov 02 '14 at 20:43
P.S: be careful, there could be other `.selected` on a single page. It's a commonly used className – Roko C. Buljan Nov 02 '14 at 20:43
@RokoC.Buljan Thanks for mentioning, in small fiddle examples I tend not to take care about further unknown markup. – matthias_h Nov 02 '14 at 20:45
@matthias_h all fine, it was just a note for the OP – Roko C. Buljan Nov 02 '14 at 20:47

Toggling between two onclick functions

2 Answers2