0

我在 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>

查询：

$(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();

});
4

3 回答 3

0

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

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

或者，您可以使用：

$("img.popButton").click(function(event) {
  event.preventDefault();
});
于 2012-07-08T10:49:51.000 回答
0

如果您真的无法控制 的onclick处理程序，<img />那么我只会在选择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/

于 2012-07-08T11:04:14.020 回答
0

此代码将不起作用：

$("<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);
于 2012-07-08T23:09:26.213 回答