禁用点击HTML元素的jQuery

Question

因此，对于那些谁不能等待fiddle

我正在开发这样的事情，我在jQuery的世界只是新的:)我的问题是我怎么使和禁用点击下面的禁用和启用按钮时点击<i>元素:)非常感谢您的答案。我真的很感激。

预览代码：

HTML

<ul class="controls"> 
    <li><i class="fa fa-pencil" data="a1"></i></li> 
    <li><i class="fa fa-trash" data="a2"></i></li> 
    <li><i class="fa fa-align-justify" data="a3"></i></li> 
</ul> 

<span class="disable">Disable</span> 
<span class="enable">Enable</span> 

CSS

.controls{ 
    list-style: none; 
} 

.controls li{ 
    display: inline-block; 
    margin: 0px 5px; 
} 

.controls li i{ 
    cursor: pointer; 
} 

.disable, 
.enable{ 
    margin: 10px; 
    background: #000; 
    color: #fff; 
    padding: 3px 5px; 
    cursor: pointer; 
} 

JS

$(document).ready(function(){ 
    $('.controls li i').click(function(){ 
     alert($(this).attr("data")); 
    }); 
}); 

Answer 1

使用.off（）删除的处理程序

$(document).ready(function() { 
 
    function handler() { 
 
    alert($(this).attr("data")); 
 
    }; 
 
    $('.controls li i').click(handler); 
 

 
    $('.disable').click(function() { 
 
    $('.controls li i').off('click', handler); 
 
    }) 
 
    $('.enable').click(function() { 
 
    //off is used here so that duplicate handler registration won't happen if you click on enable twice 
 
    $('.controls li i').off('click', handler).click(handler); 
 
    }) 
 
});

.controls { 
 
    list-style: none; 
 
} 
 
.controls li { 
 
    display: inline-block; 
 
    margin: 0px 5px; 
 
} 
 
.controls li i { 
 
    cursor: pointer; 
 
} 
 
.disable, 
 
.enable { 
 
    margin: 10px; 
 
    background: #000; 
 
    color: #fff; 
 
    padding: 3px 5px; 
 
    cursor: pointer; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="controls"> 
 
    <li><i class="fa fa-pencil" data="a1"></i></li> 
 
    <li><i class="fa fa-trash" data="a2"></i></li> 
 
    <li><i class="fa fa-align-justify" data="a3"></i></li> 
 
</ul> 
 

 
<span class="disable">Disable</span> 
 
<span class="enable">Enable</span>

Answer 2

你可以这样说：

$('.disable').click(function(){ 
    $('.controls li i').removeClass('clickable'); 
}); 

$('.enable').click(function(){ 
    $('.controls li i').addClass('clickable'); 
}); 

$('.clickable').click(function(){ 
    //actions you want 
});