0

ASP.NET プロジェクトに、4 つのオプションと既定の状態を持つドロップダウン リストがあります。ポップアップ ダイアログを開くボタンもあります。ddl の特定のオプションはポップアップ ダイアログを必要としないため、ユーザーが特定のオプションを選択した場合にポップアップを開くボタンを無効にしたいと考えています。ポップアップは、画像に関連付けられている onClick イベントを介して呼び出されます。4 つの ddl オプションのうち 2 つの onClick イベントの発生をブロックするにはどうすればよいですか? コードの簡略版は次のとおりです。

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>

Jクエリ:

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

});
4

3 に答える 3

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 に答える
0

ボタンのクリックを防ぐには、これを使用してみてください：

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

または、次を使用できます。

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

onclickのハンドラーを本当に制御できない場合は、またはが選択さ<img />れるたびに画像を非表示にします。使いやすさの観点から、UI アイテムを無効にするとユーザーが混乱することがわかったので、通常は操作できないコントロールを非表示にしてしまいます。Option2Option3

これは次の方法で実行できます。

$('#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 に答える