如何防止基于下拉列表选择的点击事件？

Question

我在一个 ASP.NET 项目中有一个下拉列表，其中包含四个选项和一个默认状态。还有一个按钮可以打开弹出对话框。如果用户选择某些选项，我想禁用打开弹出窗口的按钮，因为 ddl 上的某些选项不需要弹出对话框。弹出窗口通过绑定到图像的 onClick 事件调用。如何阻止 onClick 事件触发四个 ddl 选项中的两个？这是代码的简化版本：

HTML 结构：

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

我希望这会完全禁用按钮的 onClick 事件，但它只会改变按钮的视觉状态（基于 ui-diabled 类），但弹出窗口仍处于激活状态。

正如我之前所说，弹出窗口是通过图像标签内动态生成的 onClick 事件调用的。当用户仅选择选项 2 或 3 时，如何阻止弹出事件触发？

更新：

根据下拉菜单中的某些选择来简单地隐藏按钮绝对是一种更好的方法，但是现在，我想在隐藏其他 div 的同时动态插入新图像。我认为这将是一个简单的等式，但我在某些地方犯了错误......我无法在旧 div 中插入图像，因为它是隐藏的，那么如何动态插入带有备用图像的新 div？我的更新代码如下，但由于该功能而出现错误……有什么建议吗？

$('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

为了防止按钮点击罚款尝试使用这个：

$('img.popButton').on('click', function(){
return false;
});

或者，您可以使用：

$("img.popButton").click(function(event) {
  event.preventDefault();
});

Answer 2

如果您真的无法控制<img /> 的onclick 处理程序，那么只要选择Option2 或Option3，我就会简单地隐藏图像。从可用性的角度来看，我发现用户对禁用的 UI 项目感到困惑，所以我通常最终隐藏了他们无论如何都无法交互的控件。

您可以通过以下方式做到这一点。

$('#selID').on('change', function() {
    var value = $(this).val();
    if (value == 'Option2' || value == 'Option3') {
        $('.popButton').hide();   
    } else {
        $('.popButton').show();
    }
});​

示例 - http://jsfiddle.net/eNEeC/

Answer 3

此代码不起作用：

$("<div/>",{
    "html"  : "<img src='../Images/btnOff.png'>"
}); // <---- bad code…need help 

如果这应该创建一个 div 并附加一个孩子 (img)，那么方法应该是：

$('<div/>').html("<img src='../Images/btnOff.png'>");

上面的代码只会生成 div。您需要将其附加到它所属的页面。

例子：

var my_div = $('<div/>').html("<img src='../Images/btnOff.png'>");
$('body').append(my_div);