Set element to unclickable and then to clickable

Question

I want to have a div element set to not be clickable and then set it to clickable after another element is clicked.

So, when .case is clicked:

$(\'.case\         


        

Answer 1

Non clickable:

$("#ElementName").css("pointer-events","none");

Clickable:

$("#ElementName").css("pointer-events","auto");

Answer 2

$('#patient').unbind("click");

I hope this will work.

Answer 3

$('#patient').on('click', function() {
    if ( $(this).hasClass('active') ) {
        // do whatever when it's active.
    }
    return false;
});

If you just want it to not accept, you can add this to your css (pointer-events):

#patient { pointer-events: none; }
#patient.active { pointer-events: auto; }

Answer 4

Use trigger

$('#patient').addClass('active').trigger('click');

REFERENCE : .trigger()

Answer 5

Depending on your need (Only one element or many, dynamic element creation or not) you can use :

1) A variable to check if the first click on the other element has been done

var isActive  = false;

$('.case').click(function() {  
    isActive = true;
});

$('#patient').click(function(){
    if(isActive === false)
        return false;

    //Your behaviour
});

2) Define the click function in the click event of the first element

$('.case').on('click',function() { 
    //Make element clickable 
    $('#patient').on('click',function(){
        //Your behaviour
    });
});

Then you can use off to remove the click event

Answer 6

for first instance..add deactive class to patient div tag...

$('#patient').click(function() { 
if($(this).hasClass('deactive'))
 return;
else
//do what you want to do.
});

on case click...

$('.case').click(function() {  
$('#patient').removeClass('deactive');
});