2012-01-03 57 views
1

我在页面上有一个图标,点击时从外部JS文件调用函数。删除带有jQuery的onclick函数调用

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

更新:因为我没有超过代码不限于在此特定情况下,报头的控制程度,并不能除去的onclick =“myFunction的)(在此,NULL,NULL)从IMG标签,是如果复选框被选中,仍然有一种方法可以禁用点击动作,也许我可以删除HTML,这里JS会被认为是什么?它不是属性...

+1

将点击事件绑定到复选框,并停止*复选框的事件*传播。 – Chad 2012-01-03 19:41:11

回答

1

是否有可能而不是禁用点击事件,在继续使用myFunction代码之前,只需检查复选框的值?

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

编辑/免责声明:从技术上讲,上述示例代码没有提供一个关注点分离的好例子,因为它给myFunction代码提供了关于myCheck存在的知识。根据您的使用情况,这可能或可能不是一个好的设计模式。 Ktash的答案提供了一种替代解决方案,虽然它使用更多的代码在理论上更好地分离(尽管也需要jQuery)。

0

而不是做一个onclick属性,做在JavaScript

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

$('myIcon')? – 2012-01-03 19:48:43

+0

@RoyiNamir哎呀,是的,@Chad为我(谢谢),但我的意思是$('#myIcon')'。我花了太多时间在原型和jQuery之间切换lol – Ktash 2012-01-03 19:53:34

+0

我更新了我的问题。谢谢。 – santa 2012-01-04 17:09:12

1

怎么样了以下有关:

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工作。

+0

这些都是很好的解决方案,但是我不能删除IMG标签中的onclick =“myFunction”(this,null,null)。是否仍然有一种方法可以禁用JS onclick?UPDATED my question。 – santa 2012-01-04 17:08:19

+0

@santa then you'll have像T斯通的解决方案 – Chad 2012-01-04 17:24:02

+0

但同样,这将需要从img移动函数调用头...不是吗? – santa 2012-01-04 17:26:24

0
<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>