Удалить вызов функции onclick w/jQuery

Question

У меня есть значок на странице, что при нажатии вызывает функцию из внешнего JS-файла.

<input type="checkbox" checked="checked" id="myCheck"/> 

<img src="icon.png" id="myIcon" onclick="myFunction)(this,null,null)" /> 

Мне нужно, чтобы добавить функциональность, чтобы отключить этот щелчок, когда флажок установлен, и позволяет щелкнуть и вызвать функцию JS, если флажок не установлен.

Пробовал это, но он, похоже, не работает. Что мне не хватает?

$("#myCheck").prop("checked", true).click(function(event){ 
    event.stopPropagation(); 
}); 

UPDATE: поскольку у меня нет большого контроля над кодом, который не в заголовке в данном конкретном случае, и не могу удалить OnClick = "MYFUNCTION) (это, NULL, NULL) из IMG тега, является есть еще способ отключить действие click, если флажок установлен. Возможно, я могу удалить HTML. Что бы рассмотреть JS здесь? Это не атрибут ...

Answer 1

Возможно ли вместо отключения события click, просто проверить значение флажка перед тем, как продолжить работу с кодом myFunction?

function myFunction() { 
    if (!document.getElementById('myCheck').checked) { 
     // ... 
    } 
} 

---

Редактировать/Отказ от ответственности: Технически приведенный выше примерный код не является хорошим примером разделения проблем, поскольку он дает знания в коде myFunction о существовании myCheck. В зависимости от вашего варианта использования это может быть или не быть хорошим шаблоном проектирования. Ответ Ktash дает альтернативное решение, что, хотя он использует больше кода, теоретически лучше разделяется (хотя также требует jQuery).

Answer 2

Вместо того чтобы делать атрибут onclick, выполните следующие действия в JavaScript

$('#myIcon').click(function (e) { 
    if($('#myCheck').is(':checked')) myFunction(this,null,null); 
}); 

Answer 3

Хау о:

HTML

<input type="checkbox" checked="checked" id="myCheck"/> 
<img src="icon.png" id="myIcon" /> 

JQuery

$(function() { 
    function iconClick() { 
     alert('Clicked Icon!'); 
    } 

    $('#myIcon').click(iconClick); 

    $("#myCheck").change(function(e) { 
     if (this.checked) $('#myIcon').click(iconClick); 
     else $('#myIcon').unbind('click'); 
    }); 
}); 

Вы можете видеть, как это работает jsFiddle.

Answer 4

<input type="checkbox" checked="checked" id="myCheck"/> 

<img src="icon.png" id="myIcon" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
(function ($) { 
    var checkbox = $('#myCheck'), 
     icon = $('#myIcon'), 
     fireEvent, 
     myFunction; 

    fireEvent = function() { 
     if(checkbox.is(':checked')){ 
      icon.off('click'); 
     } else { 
      icon.on('click', myFunction); 
     } 
    }; 

    myFunction = function() { 
     console.log('I just was clicked!'); 
    }; 
    $(function() { 
     fireEvent(); 
     checkbox.on('click', fireEvent); 
    }); 
})(jQuery); 

</script>