jQuery 대화 상자, 모달 외부의 확인란 및 설정 값

Question

jQuery UI 대화 상자에 몇 가지 문제가 있으며 그 안에 확인란 값이 있습니다. 내가 가지고있는 것은 처음 몇 개의 선택 항목이있는 양식과 "more"라는 링크입니다. 사용자가 이것을 클릭하면 대화 상자를 열고 전체 옵션 목록에서 선택할 수 있습니다. 나는 다음 양식 제출에 사용하는 클릭하면 내가 숨겨진 필드에 자신의 값을 설정하고 체크 박스 (안 대화에서)의 첫 번째 일괄로

:

HTML을

<div class="col cuisines cuisineSelect"> 
<ul> 
<li><input name="cuisine" value="165" type="checkbox" id="c-165"><label for="c-165">British</label></li> 
<li><input name="cuisine" value="911" type="checkbox" id="c-911"><label for="c-911">Chinese</label></li> 
<li><input name="cuisine" value="1047" type="checkbox" id="c-1047"><label for="c-1047">European</label></li> 
</ul> 
</div> 

는 자바 스크립트,이 잘 작동

$(function() { 
    $('.cuisineSelect input').click(updateHiddenCuisineValues); 
    updateHiddenCuisineValues(); 
}); 

function updateHiddenCuisineValues() { 
    var allVals = []; 
    $('.cuisineSelect :checked').each(function() { 
    allVals.push($(this).val()); 
    }); 
    $('#cuisineString').val(allVals) 
} 

숨겨진 필드에 추가 내 #cuisineString에서 채워지는 것을 볼 수 있습니다.

그러나 나는에 의해 산란하고 내 대화 상자 : 자바 스크립트

대화

$("#moreCuisines").click(function(){ 
    $("#cuisineExtra").dialog({ 
     width: '200', 
     dialogClass: 'cuisineSelect', 
     buttons: { 
      "Refresh Search": function() {(
       $(this).dialog("close") 
      );} 
     }, 
    }); 
    return false; 
}) 

대화 DIV HTML 내가 할 볼 수없는 무엇

<div id="cuisineExtra" class="hiddenSearchPanel" title="Available Cuisines"> 
<div class="col"> 
<ul> 
<li><input name="cuisine" value="165" type="checkbox" id="ch-165"><label for="c-165">British</label></li> 
<li><input name="cuisine" value="911" type="checkbox" id="ch-911"><label for="c-911">Chinese</label></li> 
<li><input name="cuisine" value="1047" type="checkbox" id="ch-1047"><label for="c-1047">European</label></li> 
<li><input name="cuisine" value="166" type="checkbox" id="ch-166"><label for="c-166">French</label></li> 
<li><input name="cuisine" value="167" type="checkbox" id="ch-167"><label for="c-167">Indian</label></li> 
<li><input name="cuisine" value="1027" type="checkbox" id="ch-1027"><label for="c-1027">Indonesian</label></li> 
</ul> 
</div> 
</div> 

여기에있는 확인란을 클릭하면 DIV에 채워지지 않습니다. 그러나 이것을 닫고 o를 클릭하면됩니다. 대화 상자 밖에서는 최신 클릭으로 #cuisineString을 채울뿐만 아니라 대화 상자에서 확인한 모든 항목을 채 웁니다.

나는 뭔가를 추가 할 필요가 있지만 그것이 무엇인지 우리의 머리카락을 찢어 버릴 것이라고 확신합니다!

마지막으로, 나는 새로운 질문을 시작해야한다. 그러나 누구나 아이디어가 있다면, 나는 또한 누군가가 대화 상자 나 페이지에서 "영국"을 클릭한다고 말하면 양쪽 모두에서 상자를 체크해야한다. 대화 상자 및 원본을 선택하고 값을 #cuisineString에 추가하면 처음 몇 가지 옵션이 두 배가됩니다.

Answer 1

EDIT : JQuery 대화 상자가 자신의 "div"를 포함하는 div 안에 "popup"-div를 복사하기 때문에 checkbox는 click 이벤트에 바인딩 된 함수를 잃어 버리게됩니다. 하는 방법에 대한 질문의 마지막 부분에 대답하기 위해

$('.cuisineSelect input').click(updateHiddenCuisineValues); 

---

:

$(function() { 
    $('.cuisineSelect input').live('change',updateHiddenCuisineValues); 
    updateHiddenCuisineValues(); 
}); 

대신 : 대신 같은 라이브 기능을 사용하는 경우 당신이 그것을 원하는대로 작동합니다 대화 상자 안팎에서 확인란 동기화이 솔루션을 생각해 냈습니다.

function updateHiddenCuisineValues() { 
    //the next four lines checks or de-checks any checkboxes with same name and value as the one just clicked 
    if($(this).is(':checked')) 
    $('[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').attr('checked','checked'); 
    else 
    $('[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').removeAttr('checked'); 
    var allVals = []; 
    $('.cuisineSelect :checked').each(function() { 
    if($.inArray($(this).val(),allVals) == -1) //this ensures that the same value won't be added more than once 
     allVals.push($(this).val()); 
    }); 
    $('#cuisineString').val(allVals) 
} 

꽤 좋지 않을 수도 있지만 작업 완료)