Question

在两部分式连接表单的第二部分中，有一个针对“提交”按钮的jquery脚本。在同一表单步骤的独立版本（意味着它还不是连接的表单序列）上，脚本将禁用提交按钮，直到两组单选按钮之一具有“是”为止。作为序列的一部分，我已经加入了“ cf-connected”事件。将触发console.log消息，但脚本的其余部分均不会触发。

我想要的功能是，两个无线电集都可以是“ yes”，但是只需要一个yes就可以提交和删除输入中的“ disabled”以及删除红色CSS样式。当表单的第二部分首次呈现时，我希望使用红色CSS样式处于活动状态时禁用提交按钮。除了底部的console.log外，没有任何脚本运行。这是我在此页面上加载的代码：

jQuery( document ).on( 'cf.connected', function () {

// grab the two 'Yes' radio buttons
var yesOne = $("#fld_3055776_1_opt1287614");
var yesTwo = $("#fld_3324990_1_opt2062320");

// disable the submit button initially
var submitButton = $("input[value=submit]").prop("disabled", true);

// class allows the change of cursor:not-allowed
submitButton.addClass("disablePointer");

// give the ::after element "disabled" opacity
var divContainer = $(".caldera-grid .form-group.form-submit div").css("opacity", "0.45");

// grab div with red border
var redDiv = $(".submit-filter > div").addClass("red-border");

// add click listener to radio buttons
$("input[type=radio]").on("click", countUp);


function countUp() {
    console.log("countUp is firing");

    if (yesOne.prop("checked")) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else if (yesTwo.prop("checked")) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else if ( (yesOne.prop("checked")) && ( yesTwo.prop("checked")) ) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else {
        submitButton.prop("disabled", true).addClass("disablePointer");
        divContainer.css("opacity", "0.45");
        redDiv.addClass("red-border");
    }
}    


console.log("Form has moved to next part");

}）;

在呈现表单第二步的DOM之后，如何使此脚本正确执行？

这里是指向staging form with 2 parts的链接（请注意，表单的每个部分顶部的“步骤”与同一表单的步骤1和步骤2不相关）。

Answer 1

我能够修复它。我需要在滚动文档上添加一个事件侦听器，然后运行以上所有代码。然后，为了防止它在每次滚动中运行，我之后放了.off（）。现在，我需要做的整个代码是：

$（document）.on（'cf.connected'，function（）{ $（document）.on（'scroll'，function（）{

    // grab the two 'Yes' radio buttons
    var yesOne = $("#fld_3055776_1_opt1287614");
    var yesTwo = $("#fld_3324990_1_opt2062320");

    // disable the submit button initially
    var submitButton = $("input[value=Submit]").prop("disabled", true);

    // class allows the change of cursor:not-allowed
    submitButton.addClass("disablePointer");

    // give the ::after element "disabled" opacity
    var divContainer = $(".caldera-grid .form-group.form-submit div").css("opacity", "0.45");

    // grab div with red border
    var redDiv = $(".submit-filter > div").addClass("red-border");

    // add click listener to radio buttons
    $("input[type=radio]").on("click", countUp);


    function countUp() {
        if (yesOne.prop("checked")) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else if (yesTwo.prop("checked")) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else if ( (yesOne.prop("checked")) && ( yesTwo.prop("checked")) ) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else {
            submitButton.prop("disabled", true).addClass("disablePointer");
            divContainer.css("opacity", "0.45");
            redDiv.addClass("red-border");
        }
    }
    $(document).off('scroll');
});

}）;

自定义jquery以表单顺序的第二步为目标

1 个答案: