How to disable click event using Knockout?

Question

I have two buttons, which is called

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

What will be the best here? Can I use jQuery on $(document).ready? The problem is data-bind click disables the other click event when being pressed and likewise. But when I press same button, it enables the second button back once again.

So what I'm trying to say with all jibberish is that, I only want one button enabled at a time. Is this possible to coop together with knockout? And if so please tell me how. PS: I have looked on the knockout site about enable, but I do not get it. How I should get it to work fully?

Answer 1

knockoutjs enable functionality would work when we have code just like this

At initial both the links active. If you click any one link it disables another.If you click the link again it enables the other link.

This is not the answer what you ask for .. this is the answer how enable work with knockout

You want only one button enable,then there must be some condition ,apply those condition with this enable binding , that's all problem solved.

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: enable and disable binding won't work for anchor tag.It works for input,textarea,Select..

Answer 2

You could add an observable that held which button was pressed then change the click to be 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 would have to decide how you set the observable though.