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').click(function() {  
$('#patient').addClass('active').on('click');
});

But how do I set #patient to unclickable in the first instance when I have further down:

$('#patient').click(function() { 
alert('clicked');
});

Answer 1

$('#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 2

Non clickable:

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

Clickable:

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