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类），但弹出窗口仍然处于激活状态。

正如我之前所说，弹出窗口是通过image标签内动态生成的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

如果您真的无法控制onclick的{{1}}处理程序，那么只要选择<img />或Option2，我就会隐藏图片。从可用性的角度来看，我发现用户对禁用的UI项目感到困惑，因此我通常最终隐藏了无法进行交互的控件。

您可以使用以下方法执行此操作。

Option3

示例 - 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);

如何根据下拉列表选择阻止点击事件？

3 个答案: