2012-01-03 9 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(); 
}); 

UPDATE:私はタグのimgから(この、NULL、NULL))この特定の場合のヘッダにないコード上はるかに制御を持っていない、とのonclick = "MyFunctionを削除できませんので、ありますチェックボックスが選択されている場合、クリックアクションを無効にする方法はありますか?おそらく私はHTMLを削除することができますか?JSはここで考慮されるでしょうか?属性ではありません...

+1

クリックイベントをチェックボックスにバインドし、チェックボックスのイベント*を伝播を停止します。 – Chad

答えて

1

clickイベントを無効にする代わりに、 myFunctionコードを実行する前にチェックボックスの値を確認するだけですか?

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

編集/免責事項:技術的に上記のコード例では、myFunctionコードにmyCheckの知識があるため、問題の分離の良い例は示されていません。あなたのユースケースに応じて、これは良いデザインパターンかもしれません。 Ktashの回答は、より多くのコードを使用する一方で、理論的には分離されています(ただし、jQueryも必要です)。代わりにonclick属性をすることの

0

は、およそJavaScriptの

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

$( 'myIcon')???? –

+0

@RoyiNamirおっと、ええ、チャドは私のために持ってきました(ありがとう)、私は '$( '#myIcon')を意味しました。私はプロトタイプとjQueryの間で過度の時間を費やしています。 – Ktash

+0

私の質問が更新されました。どうも。 – santa

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を無効にする方法はありますか?質問を更新しました – santa

+0

@santa T. Stoneの解決策のようにする – Chad

+0

もう一度、関数呼び出しをimgからヘッダに移動する必要がありますか? – santa

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> 
関連する問題