Отключить якорь с onclick

Question

У меня есть проблема, чтобы отключить мой якорь при его нажатии.

HTML:

<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'> 
<i class='polygon_mark'></i> 
</a> 
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'> 
<i class='square_mark'></i> 
</a> 

JQuery

$('.square_mark').click(function() { 
     if(!$(this).hasClass('active')) { 
      $(this).addClass('active'); 
      $('.polygon_mark').off('click', disabler); 
     } else { 
      $(this).removeClass('active'); 
      $('.polygon_mark').on('click', disabler); 
     } 
    }); 
    $('.polygon_mark').click(function() { 
     if(!$(this).hasClass('active')) { 
      $(this).addClass('active'); 
      $('.square_mark').off('click', disabler); 
     } else { 
      $(this).removeClass('active'); 
      $('.square_mark').on('click', disabler); 
     } 
    }); 
}); 

Функция:

disabler: function(event) { 
    event.preventDefault(); 
    return false; 
}, 

Функциональность для изменения классов работают хорошо, но то, что я хотел бы добавить в это, ОС, когда якорь # 1, это отключает другой якорь, и когда я нажимаю его еще раз, я бы хотел, чтобы он повторное закрепление якоря, а также наоборот, но для якоря № 2.

Я пробовал делать что-то подобное, но я не могу заставить его работать, не понимая его полностью.

Answer 1

Сделайте это и добавьте класс disable в ваш css.

$('.square_mark').click(function() { 
     $(this).toggleClass('active'); 
     $('.polygon_mark').toggleClass("disabled"); 
}); 

$('.polygon_mark').click(function() { 
     $(this).toggleClass('active'); 
     $('.square_mark').toggleClass("disabled"); 
}); 

Это должно сделать tric.

.disabled { 
    pointer-events: none; 
    cursor: default; 
} 

Edit: пример на jsfiddle: http://jsfiddle.net/uKCYN/

И если вам нужно проверить для активного класса, чтобы сделать что-то еще вы можете закодировать это так:

$('.square_mark').click(function() { 
    if(!$(this).hasClass('active')) 
     $(this).addClass('active'); 
    else 
     $(this).removeClass('active'); 
    $('.polygon_mark').toggleClass("disabled"); 
}); 

$('.polygon_mark').click(function() { 
    if(!$(this).hasClass('active')) 
     $(this).addClass('active'); 
    else 
     $(this).removeClass('active'); 
    $('.square_mark').toggleClass("disabled"); 
}); 

и добавить ваш дополнительный материал в предложениях if.

Answer 2

Просто измените функцию обработчика, как это и попробуйте еще раз:

// handler function 
function disabler(event) { 
    event.preventDefault(); 
    console.log('item anchor clicked'); 
}