使用jQuery對話框中的複選框

Question

我有一個jQuery對話框，使用非jQuery的javascript函數來完成功能取決於哪個按鈕被選中。我在對話框中添加了一個複選框，用戶必須檢查該複選框以表示對發生什麼的理解。

當我將檢查狀態的測試添加到非jquery javascript時，checked狀態總是返回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是僅用於顯示兩個四強的div，以及一些其他的調整是由jQuery的提出：

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

此外，我增加了屏幕截圖：

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

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應用由於款式更改。

Answer 2

嘗試以下（asuming你$dialog_cancel是在全球範圍內）

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

，而不是

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