jqueryダイアログでチェックボックスを操作する

Question

jquery以外のjavascript関数を使用して、どのボタンが選択されているかに応じて機能を完了するjqueryダイアログがあります。ダイアログボックス内にチェックボックスを追加して、何が起きるかの理解を示すためにチェックする必要があります。

チェックされた状態のテストを非jqueryのjavascriptに追加すると、チェックされた状態は常にfalseとして返されます。

以下はコードです。最初の二つのアラートとreturn文は、テストのために、次のとおりです。

function acceptPitch() 
{ 

    // the two alerts and return false are for testing only 
    alert('jq=' + $('#understand').prop("checked")); 
    alert('checkbox=' + document.getElementById('understand').checked); 
    return false; 
    if (document.getElementById('understand').checked) 
    { 
     handleUserDelay(); 
     $('#decision').val('yes'); 
     document.forms['cancellationForm'].submit(); 
     return true; 
    } 
    else 
    { 
     alert('[appropriate message here]'); 
     return false; 
    } 
} 

チェックボックスがダイアログボックスにない場合は、予想通り、上記の機能が動作します。しかし、ダイアログボックスの中に置かれると、 "checked"のテストは常にfalseを返します。

var $dialog_cancel = $('#rh-dialog.cancel'); 
$dialog_cancel.dialog(
{ 
    autoOpen:false, 
    width:500, 
    modal:true, 
    draggable:true, 
    resizable:false 
}); 

$('#reason').change(function() 
{ 
    var reason1 = $(this).val().substr(0,1); 
    if (reason1 == 'n') 
    { 
     $('#pitch').html($('#pitch-no').html()); 
     $('#acceptPitchButton').val($('#free-button-text').html()); 
    } 
    else if (reason1 == 'y') 
    { 
     $('#pitch').html($('#pitch-yes').html()); 
     $('#acceptPitchButton').val($('#perp-button-text').html()); 
    } 
    else 
    { 
     validCancelReason(); 
    } 
}); 

$('#requestCancelButton').click(function() 
{ 
    if (validCancelReason()) 
    { 
     $dialog_cancel.dialog('open'); 
    } 
}); 

以下「ソースの表示」リストから取られたマークアップです：

はここでダイアログのメインコードです。そのjqueryのは、最後の4つのdivの表示のみ2に使用されますのでご注意ください、そして他のいくつかの調整がjqueryので行われていること：

screen shot showing dialog with checkbox http://www.oofdah.com/wp-content/uploads/2012/04/Screen-Shot-2012-04-27-at-4.38.13-PM.png

：

<div id="rh-dialog" class="cancel" title="Confirm Cancellation"> 
    <p> 
     This will request cancellation of your continuing subscription service.<br /> 
    </p> 
    <div id="pitch"></div> 
    <p style="font-style: italic; margin-top:10px;"> 
     Please click <strong>YES!</strong> to continue your plan, or <strong>No, Thank You</strong> to cancel. 
    </p> 
    <div> 
     <div id="rh-dialog-button-1"> 
      <input type="button" id="acceptPitchButton" value="Don't Cancel" onclick="bar1.showBar(); acceptPitch();" /> 
     </div> 
     <div id="rh-dialog-button-2"> 
      <input type="button" id="rejectPitchButton" value="No, Thank You, Just Cancel" onclick="bar1.showBar(); rejectPitch();" /> 
     </div> 
    </div> 
</div> 
<div id="pitch-no" class="no-disp"><strong>GET ONE FREE MONTH!</strong><br />It is very important to us that all of our subscribers have success with our service, not only in speaking with reps but in actually growing your business. Given you are canceling because you were unsatisfied, we would like to offer you <strong>one FREE month.</strong><br /><br />To take advantage of this offer simply click <strong>Yes! Free Month</strong> and your credit card or PayPal account will not be charged for the next month.<br /><br />After your free month, you can choose to cancel your subscription or continue on with our Maintenance plan.<br/><br/><form id="agree-form"><input type="checkbox" id="understand"><strong>I understand</strong> that by requesting a free month I am not canceling my subscription, and that after the free month is over, my credit card or PayPal account will be charged for the next month of service and again every month thereafter until I do cancel.</input></form></div> 
<div id="pitch-yes" class="no-disp"><strong>BARGAIN PRICE PERPETUITY PLAN!</strong><br />You realize that placing quality sales reps requires a continual effort trolling for reps at all times because timing is of the essense. For that reason, we would like to offer you our <strong>Perpetuity Plan</strong>.<br /><br />This plan is only USD $79/month, cancel anytime, and you can lock into that rate for life.<br /><br />Click <strong>Yes! Perpetuity Plan</strong> to switch to the Perpetuity Plan.</div> 
<div id="free-button-text" class="no-disp">Yes! Free Month - Continue Subscription</div> 
<div id="perp-button-text" class="no-disp">Yes! Perpetuity Plan</div> 

加えて、私はスクリーンショットを追加してい

Answer 1

私は上記のコメントに記載されている解決策をソリューションとして採用しました。この解決策は、jQuery UI Dialog with ASP.NET button postbackから適合されています。次のように

基本的に私は他の質問から使用されるアプローチがそこに与えられました。私のダイアログが定義された後に私の場合は

dlg.parent().appendTo(jQuery("form:first")); 

を、私はこのjQueryのステートメントを追加することによって、そのアプローチを適応：

$dialog_cancel.parent().appendTo($('#cancellationForm'));

このステートメントが存在すると、jQueryとプレーンなjavascriptの両方のアプローチが機能します。

alert('jq=' + $('#understand').prop("checked")); 
alert('checkbox=' + document.getElementById('understand').checked); 

このアプローチを使用した後は、理由理由によるDOMに適用されたスタイルの私は少しスタイリングを微調整しなければならなかったDOMへの変更、の：それは2次の文のいずれかを使用することができ、あります変化する。

Answer 2

if ($('#understand', $dialog_cancel).is(':checked')) 
{ 
    // code 
} 

代わりの

（あなた $dialog_cancelをasumingはグローバルスコープである）以下のことを試してみてください

if (document.getElementById('understand').checked) 
{ 
    // code 
}