Remove onclick function call w/jQuery

Question

I have an icon on a page, what when clicked is calling a function from an external JS file.

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

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

I need to add a functionality to disable this click when a checkbox is checked, and allow click and calling the JS function if the checkbox is not selected.

Tried this but it does not seem to work. What am I missing?

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

UPDATE: since I do not have much control over code that is not in the header in this particular case, and can not remove onclick="myFunction)(this,null,null) from img tag, is there still a way to disable click action if the checkbox is selected. Perhaps I can remove HTML. What would JS be considered here? It's not an attribute...

that binds a click event to the check box, and stops the checkbox's event from propagating. — Chad
– Chad, Commented Jan 3, 2012 at 19:41

Chad · Accepted Answer · 2012-01-03 19:48:00Z

1

Hows about:

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

You can see it working at this jsFiddle.

answered Jan 3, 2012 at 19:48

Chad

19.6k4 gold badges54 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

santa Over a year ago

These are all great solutions, however I can not remove onclick="myFunction)(this,null,null) from IMG tag. Is there still a way to disable that JS onclick? UPDATED my question.

Chad Over a year ago

@santa then you would have to do something like T. Stone's solution

santa Over a year ago

But again, that would require moving function call from img to the header... won't it?

Chad Over a year ago

@santa no it would require modifying myFunction()

T. Stone · Accepted Answer · 2012-01-03 20:21:31Z

1

Is it possible to, instead of disabling the click event, to simply check for the value of the checkbox before proceeding with the myFunction code?

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

Edit/Disclaimer: Technically the above example code doesn't provide a good example of separation of concerns because it gives knowledge to the myFunction code about the existence of myCheck. Depending on your use case this may or may not be a good design pattern. Ktash's answer provides an alternate solution that while it uses more code is theoretically better separated (though also requiring jQuery).

edited Jan 3, 2012 at 20:21

answered Jan 3, 2012 at 19:46

T. Stone

19.5k15 gold badges72 silver badges100 bronze badges

Comments

Chad · Accepted Answer · 2012-01-03 19:51:35Z

0

Instead of doing an onclick attribute, do the following in JavaScript

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

edited Jan 3, 2012 at 19:51

Chad

19.6k4 gold badges54 silver badges75 bronze badges

answered Jan 3, 2012 at 19:46

LoveAndCoding

7,9473 gold badges34 silver badges55 bronze badges

1 Comment

LoveAndCoding Over a year ago

@RoyiNamir Oops, yeah, @Chad got it for me (thanks), but I meant $('#myIcon'). I spend too much time switching between prototype and jQuery lol

Paul · Accepted Answer · 2012-01-03 19:55:55Z

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>

answered Jan 3, 2012 at 19:55

Paul

12.4k4 gold badges52 silver badges58 bronze badges

Collectives™ on Stack Overflow

Remove onclick function call w/jQuery

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related