How to disable click event with knockout?

Question

I have two buttons called

<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'> <a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'> 

What will be best here? Is it possible to use jQuery on $(document).ready ? The problem is that a data binding click disables another click event when clicked and similarly. But when I press the same button, it turns on the second button again.

What I'm trying to say with all the joke is that I want only one button to turn on at a time. Can I work with a knockout? And if so, please tell me how to do this. PS: I looked at the inclusion knockout site, but I do not understand this. How should I make it work completely?

Answer 1

You can add the observable in which the button was pressed, and then change the click to a function that checked the observable:

 <a href='#' data-bind='click: function() { if(buttonClickedObservable() == 'polygon') { clickActivateSpatialSearch(); }' id='draw_polygon'> <a href='#' data-bind='click: function() { if(buttonClickedObservable() == 'box') { clickActivateSpatialSearchBox'(); }' id='draw_box'> 

You will need to decide how you set the observable, though.

Answer 2

The knockoutjs function allows you to work when we have code similar to this

At the beginning, both links are active. If you click on any one link, it will disable the other. If you click the link again, it activates another link.

This is not the answer you are asking for .. here is the answer that allows you to work with knockout

You want to enable only one button, then there must be some condition, apply these conditions with this inclusion binding, so that all problems are resolved.

Html: -

 <input type="text" data-bind="enable: linkTwo() != 'clicked',click: clickActivateSpatialSearch" id='draw_polygon'/> <input type="text" data-bind="enable: linkOne() != 'clicked',click: clickActivateSpatialSearchBox" id='draw_box'/> 

Script: -

 var self = this; self.linkOne = ko.observable(); self.linkTwo = ko.observable(); self.clickActivateSpatialSearch = function(){ if(self.linkOne() != 'clicked'){ self.linkOne('clicked'); } else{ self.linkOne('notClicked'); } // some code here }; self.clickActivateSpatialSearchBox= function(){ if(self.linkTwo() != 'clicked'){ self.linkTwo('clicked'); } else{ self.linkTwo('notClicked'); } // some code here }; 

Note: enabling and disabling snapping will not work for tag snapping. It works for input, textarea, Select ..