드롭 다운 목록 선택을 기반으로 클릭 이벤트를 방지하려면 어떻게합니까?

Question

ASP.NET 프로젝트에서 네 가지 옵션과 기본 상태가있는 드롭 다운 목록이 있습니다. 팝업 대화 상자를 여는 버튼도 있습니다. 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> 

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 기반 클래스를 기반으로 함)이지만 팝업 창이 계속 활성화됩니다.

앞에서 설명한 것처럼 이미지 태그 내부에서 동적으로 생성 된 onClick 이벤트를 통해 팝업이 호출됩니다. 사용자가 옵션 2 또는 3 만 선택하면 팝업 이벤트가 시작되지 않게하려면 어떻게합니까?

UPDATE :

확실히 단순히 드롭 다운에서 특정 선택에 따라 버튼을 숨길 수있는 더 나은 방법입니다

,하지만 지금은, 내가 다른 사업부가 보이지 않을 때 동적으로 새로운 이미지를 삽입하고 싶습니다. 나는 이것이 간단한 방정식 일 거라고 생각했는데 어디에서 ... 내가 숨겨져있어서 이전 div에 이미지를 삽입 할 수 없기 때문에 대체 이미지로 새 div를 어떻게 동적으로 삽입합니까? 내 업데이트 된 코드는 아래에 있지만 기능 때문에 오류가 발생했습니다 ... 제안 사항이 있습니까? 당신이 사용할 수있는,

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

나 :

버튼을 방지하기위한

$('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 />의 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 2

이를 사용해보십시오 벌금을 클릭

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

Answer 3

이 코드는 작동하지 않습니다

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

을이이 사업부를 만들고 아이 (IMG)을 추가 할 예정이다 경우, 접근해야한다 :

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

위의 코드는 onl입니다. y는 div를 생성합니다. 소속 된 페이지에 추가해야합니다.

예 :

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