Looks like the behavior is coming from a library that you are using. To override the behavior, simply disable click
event callback after the first click. But beware, this will also disable any other actions that were defined in your click
callback.
Original Answer: (This solution will fail for OP because it is evident from the comments that the click
event has more handles after selection. See the update to the answer at bottom of my post)
Add this towards the end of your javascript on the page:
$(".swatch-attribute-options .swatch-option").on("click", function() {
$(this).off("click");
});
Demo fiddle here
If you suspect there are more events in callback, simply add the class selected
again. This will momentarily remove the selection but will add it back almost instantly unless there are any time consuming activity in the plugin code that handles click
event.
$(".swatch-attribute-options .swatch-option").on("click", function() {
$(this).addClass("selected"));
});
Update based on comment(s):
This should keep the only last selection and wont unselect if clicked again. Also, it will not block any subsequent handles in your click
event
$(".swatch-attribute-options .swatch-option").on("click", function() {
$(this).siblings(".swatch-option").removeClass("selected");
$(this).addClass("selected");
});
Updated Fiddle