Отключить клик 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 
});