jquery - 将元素设置为不可点击，然后设置为可点击

Question

我希望将一个 div 元素设置为不可点击，然后在点击另一个元素后将其设置为可点击。

因此，当单击 .case 时：

$('.case').click(function() {  
$('#patient').addClass('active').on('click');
});

但是，当我进一步向下时，如何在第一个实例中将#patient 设置为不可点击：

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

Answer 1

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

如果您只是希望它不接受，您可以将其添加到您的 CSS（指针事件）：

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

Answer 2

不可点击：

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

可点击：

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

Answer 3

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

我希望这会奏效。

Answer 4

根据您的需要（仅一个元素或多个，动态元素创建与否），您可以使用：

1) 一个变量来检查是否已经完成了对另一个元素的第一次点击

var isActive  = false;

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

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

    //Your behaviour
});

2）在第一个元素的点击事件中定义点击函数

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

然后您可以使用off删除点击事件

Answer 5

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

Answer 6

使用触发器

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

参考：.trigger()