javascript - 防止点击另一个按钮jquery

Question

如果单击第一个按钮，如何防止单击另一个按钮...

示例 http://jsfiddle.net/C5AVH/3/

  $(function(){ 
     $('.vote_like').one('click',function(){
     $('.vote_dislike').removeClass('vote_dislike');
     alert('Done!')
   });

   $('.vote_dislike').one('click',function(){
    $('.vote_like').removeClass('vote_like');
    alert('Done!');
    });
   });

    <a href="#" class="vote_like">Like</a> - 
    <a href="#" class="vote_dislike">Dislike</a>

当您单击“喜欢”按钮时，我想禁用单击“不喜欢””按钮，反之...

我尝试删除课程，但似乎不起作用......

$('.vote_like').removeClass('vote_like');

Answer 1

您可以删除点击处理程序

$(function () {
    $('.vote_like').one('click.like', function () {
        $('.vote_dislike').off('click.like');
        console.log('like!')
    });
    $('.vote_dislike').one('click.like', function () {
        $('.vote_like').off('click.like');
        console.log('dislike!');
    });
});

演示：小提琴

Answer 2

因为您已将处理程序附加到每个按钮，所以根据jquery docs.one，它仍将最多执行一次。为了防止单击，您必须在单击后删除处理程序。

     $('.vote_like').one('click',function(){
     $('.vote_dislike').off();
     alert('Done!')
   });

   $('.vote_dislike').one('click',function(){
    $('.vote_like').off();
    alert('Done!');
    });
   });

    <a href="#" class="vote_like">Like</a> - 
    <a href="#" class="vote_dislike">Dislike</a>

但更好的是，为什么不将one处理程序附加到两个元素并检查哪个被点击：

  $(function(){ 
     $('.vote_like,.vote_dislike').one('click',function(){  
     if($(this).is('.vote_like')){
         //set data for like
     }
     else{
         //set data for dislike
     } 
     //make ajax call
   });

Answer 3

锚无法禁用它们，因此您要么需要删除锚，要么在 javascript 中设置一个布尔值来跟踪它是否被点击。

或者，您可以将它们转换为实际button元素，玩转disabled状态。

或者您可以使用 jquery 将自定义data属性添加到锚点以跟踪它是否“禁用”

Answer 4

可以为两个按钮使用一个处理程序，并为两个按钮删除其中的单击处理程序

var btns=$('.vote_like, .vote_dislike').on('click',function(e){
    e.preventDefault();
    var isLikeBtn=$(this).is('.vote_like');
    /* remove click handler for both, remove class from other button */
    btns.off('click').not(this).removeClass( isLikeBtn ? 'vote_dislike' : 'vote_like');
});

因为off两者都使用相当于使用one

Answer 5

演示

$(function(){ 
    $('.vote_like, .vote_dislike').on('click',function(){
        $(this).siblings('.vote_like, .vote_dislike').add($(this)).prop('disabled',true);
        if ($(this).hasClass('vote_like')) {
            /* Do like things */     alert('like');
        }else{
            /* Do dislike things */  alert('dislike');
        }
    });
});