Jquery Disable div and disable click on it

Question

I am trying to disable click event and disable div once I click on the item. I am unable to achieve this functionality. Any help? What I have tried

<div class="ordrClone">
                       Image 1
                    </div>
<div class="ordrClone">
                       Image 2
                    </div>
<div class="ordrClone">
                       Image 3
                    </div>

<div>
   <input type="button" id= "btnCancel" value="Enable"> 
</div>

 $('.ordrClone').click(function () {
        $('.ordrClone').not(this).each(function() {
            $(this).off('click');
        });
    });

$('#btnCancel').click(function () {
     $('.ordrClone').each(function() {
            $(this).on('click');
        });
});

Bhojendra Rauniyar · Accepted Answer · 2014-01-31 06:47:14Z

2

Use $(this) instead of this:

$('.ordrClone').not($(this)).each(function() {

And also create a callback function and use that callback on the on method:

$(this).on('click');//it's wrong way to do.

$(this).on('click',callback);

see on method for more detail

But if you want to use the function only for once you can use the one method instead of on method.

edited Jan 31, 2014 at 6:47

answered Jan 31, 2014 at 6:44

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2014-01-31 06:44:46Z

1

One easy solution is

$(document).on('click', '.ordrClone:not(.disabled)', function () {
    console.log('clicked')
    $('.ordrClone').not(this).addClass('disabled');
});

$('#btnCancel').click(function () {
    $('.ordrClone').removeClass('disabled');
});

Demo: Fiddle

answered Jan 31, 2014 at 6:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Rohan Kumar · Accepted Answer · 2014-01-31 06:45:53Z

1

Use one() instead of on() like,

$('.ordrClone').one('click',function () {
      // your code worked once
});

Live Demo

edited Jan 31, 2014 at 6:45

answered Jan 31, 2014 at 6:45

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Comments

A.T. · Accepted Answer · 2014-01-31 06:46:05Z

1

You can use One, if you want to click once only

$(document).one('.ordrClone','click',function () {
        $('.ordrClone').not(this).each(function() {
            $(this).off('click');
        });
    });

answered Jan 31, 2014 at 6:46

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

Comments

beyondlogics.net · Accepted Answer · 2014-01-31 06:47:04Z

1

$("#btnCancel").click(function() { $(this).unbind('click'); }

This should unbind the 'click' functionality of the item you just clicked. You can disable an element many different ways. A really popular way is .hide()`ing the code and using it when needed, but the above code should work fine to disable a specific event from a form element.

answered Jan 31, 2014 at 6:47

beyondlogics.net

111 bronze badge

Collectives™ on Stack Overflow

Jquery Disable div and disable click on it

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related