CODEWITHSUNDEEP
jquery
IlludiumPu36
IlludiumPu36

Reputation: 4304

Set element to unclickable and then to clickable

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

Upvotes: 23

Views: 66153

Answers (6)

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10562

Non clickable: 

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

Clickable: 

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

Upvotes: 29

kalley
kalley

Reputation: 18462

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

Upvotes: 41

A.T.
A.T.

Reputation: 26312

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

Upvotes: 1

sdespont
sdespont

Reputation: 14025

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

Upvotes: 2

Olrac
Olrac

Reputation: 1537

Use trigger

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

REFERENCE : .trigger()

Upvotes: 0

Mohammad Ismail Khan
Mohammad Ismail Khan

Reputation: 651

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

I hope this will work.

Upvotes: 9

Related Questions