1

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

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

以下はコードです。最初の2つのアラートと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;
    }
}

チェックボックスがダイアログボックスにない場合、上記の機能は期待どおりに機能します。ただし、ダイアログボックス内に配置すると、「チェック済み」のテストは常に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によって行われることに注意してください。

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

さらに、スクリーンショットを追加しています。

チェックボックス付きのダイアログを表示するスクリーンショット
（出典：oofdah.com）

4

2 に答える 2

0

フォローしてみてください（あなた$dialog_cancelがグローバルスコープにいると仮定して）

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

それ以外の

if (document.getElementById('understand').checked)
{
    // code
}
于 2012-04-27T21:56:57.143 に答える
0

私は、上記のコメントに記載されている潜在的な解決策を解決策として採用しました。このソリューションは、ASP.NETボタンのポストバックを備えたjQueryUIダイアログから採用されています。

基本的に、他の質問から使用したアプローチは、次のように与えられました。

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

私の場合、ダイアログが定義された後にこのjQueryステートメントを追加することで、このアプローチを採用しました。

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

そのステートメントが存在する後、jQueryとプレーンJavaScriptの両方のアプローチが機能します。つまり、次の2つのステートメントのいずれかを使用できます。

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

このアプローチを使用した後、DOMが変更されたため、DOMの変更によって適用されたスタイルのために、スタイルを少し調整する必要がありました。

于 2012-04-30T19:55:08.427 に答える