CODEWITHSUNDEEP
javascriptjquery
Milan Milosevic
Milan Milosevic

Reputation: 433

Prevent click on another button jquery

How to prevent click another button if first is clicked...

Example 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>

When you click Like button i want disable click on Dislike button and inversely...

im try with removing class but seems that not working...

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

Upvotes: 0

Views: 128

Answers (5)

charlietfl
charlietfl

Reputation: 171669

Can use one handler for both buttons and remove click handler within it for both

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');
});

Since using off on both would be equivalent of using one

Upvotes: 0

dnapierata
dnapierata

Reputation: 1213

Because you've attached the .one handler to each button, it will still be executed at most one time according to the jquery docs. To prevent the click you must remove the handler after one is clicked.

     $('.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>

But better yet, why not just attach the one handler to both elements and check which was clicked:

  $(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
   });

Upvotes: 1

Oriol
Oriol

Reputation: 288120

Demo

$(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');
        }
    });
});

Upvotes: 0

helion3
helion3

Reputation: 37381

Anchors don't have a way to disable them, so you'd either need to remove the anchor or set a boolean in your javascript to track if it's been clicked.

Or, you can convert them into actual button elements, play with the disabled state.

Or you can use jquery to add custom data attributes to the anchor to track if it's "disabled"

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can remove the click handler

$(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!');
    });
});

Demo: Fiddle

Upvotes: 2

Related Questions