How do I prevent a click event based on drop down list selection? - asp.net-mvc

Question

I have a drop down list in an ASP.NET project with four options and a default state. There is also a button that opens a popup dialog. I would like to disable the button that opens the popup if user selects certain options, as certain options on the ddl do not require the popup dialog. The popup is called via onClick event that is tied to the image. How do I block the onClick event from firing for two of the four ddl options? Here's a simplified version of the code:
HTML STRUCTURE:
<select class="selClass" id="selID" name="selName"><option value="">- Select -</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
JQUERY:
$(function () {
if ($("#ddlID option:selected").text() == "- Select -")
$('img.popButton').button({ disabled: true })
else if ($("#ddlID option:selected").text() == "Option1")
$('img.itemgridimg').button({ disabled: false });
else if ("#ddlID option:selected").text() == "Option2")
$('img.itemgridimg').button({ disabled: true });
else if ("#ddlID option:selected").text() == "Option3")
$('img.itemgridimg').button({ disabled: true });
else if ("#ddlID option:selected").text() == "Option4")
$('img.itemgridimg').button({ disabled: false });
});
I was hoping that this would completely disable the onClick event for the button, but it only changes the visual state of the button (based on the ui-diabled class), but the popup window is still activated.
As I stated before, the popup is called via a dynamically generated onClick event inside the image tag. How do I stop the popup event from firing when a user selects options 2 or 3 only?
UPDATE:
It is definitely a better approach to simply hide the button based on certain selections from drop down, but now, I would like to dynamically insert a new image while the other div is hidden. I thought this would be a simple equation, but I am making an error some where…I can't insert the image in the old div because it is hidden, so how do I dynamically insert a new div with the alternate image? My updated code is below, but I am getting an error because of the function…any suggestions?
$('img.itemgridimg').hide();
$("[id][name*='Status']:eq(0)").change(function () {
if ($("[id][name*='Status']:eq(0) option:selected").text() == "- Select -")
$('img.itemgridimg').eq(0).hide();
$("<div/>",{
"html" : "<img src='../Images/btnOff.png'>"
}); // <---- bad code…need help
else if ($("[id][name*='Status']:eq(0) option:selected").text() == "Missing")
$('img.itemgridimg').eq(0).show();
else if ($("[id][name*='Status']:eq(0) option:selected").text() == "Not Applicable")
$('img.itemgridimg').eq(0).hide();
else if ($("[id][name*='Status']:eq(0) option:selected").text() == "Functional / Acceptable As Is")
$('img.itemgridimg').eq(0).hide();
else if ($("[id][name*='Status']:eq(0) option:selected").text() == "Needs Repair/Replace/Cleaning")
$('img.itemgridimg').eq(0).show();
});

Answer 1

If you truly have no control over the onclick handler of the <img /> then I would simply hide the image whenever Option2 or Option3 is selected. From a usability perspective I've found that users get confused by disabled UI items, so I usually end up hiding controls that they cannot interact with anyways.
You can do this with the following.
$('#selID').on('change', function() {
var value = $(this).val();
if (value == 'Option2' || value == 'Option3') {
$('.popButton').hide();
} else {
$('.popButton').show();
}
});​
Example - http://jsfiddle.net/eNEeC/

Answer 2

For preventing button click to fine try using this:
$('img.popButton').on('click', function(){
return false;
});
or, you can use:
$("img.popButton").click(function(event) {
event.preventDefault();
});

Answer 3

This code will not work:
$("<div/>",{
"html" : "<img src='../Images/btnOff.png'>"
}); // <---- bad code…need help
If this is supposed to create a div and append a child (img), then the approach should be:
$('<div/>').html("<img src='../Images/btnOff.png'>");
The code above will only generate the div. You need to append it to your page where it belongs.
Example:
var my_div = $('<div/>').html("<img src='../Images/btnOff.png'>");
$('body').append(my_div);