1

我有一个 jquery 对话框，它使用非 jquery javascript 函数来完成功能，具体取决于选择了哪个按钮。我在对话框中添加了一个复选框，用户必须选中该复选框以表示了解将发生的情况。

当我将选中状态的测试添加到非 jquery javascript 时，选中状态始终返回为 false。

以下是代码。前两个警报和返回语句用于测试：

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>

另外，我正在添加一个屏幕截图：

显示带有复选框的对话框的屏幕截图
（来源：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

我已采用上述评论中提到的潜在解决方案作为解决方案。该解决方案改编自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 更改而应用了样式。

于 2012-04-30T19:55:08.427 回答