Question

我有一个包含许多输入组的表单，除了第一个处于活动状态的组外，所有表单都被隐藏。提交按钮实际上是下一个组，它应该在任何组中禁用。我的问题是，在检查了第一组输入后，提交按钮（nextbutton）保持活动状态，这是不正确的。有人可以帮忙吗？

<html>
    <p>Button should be enabled if at least one checkbox is checked</p>
        <div class="grp1">
            <div>
                <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
            </div>
            <div>
                <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
            </div>
            <div>
                <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
            </div>
            <div>
                <input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
            </div>
            <div>
                <input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
            </div>
        </div>

        <h1>group 2 is hidden and will be display after group 1 input is checked and 
            button should be enabled if at least one check_box is checked</h1>
        <div class="grp2 " style="display:none;">
            <div>
                <input type="check_box" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
            </div>
            <div>
                <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
            </div>
            <div>
                <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
            </div>
            <div>
                <input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
            </div>
            <div>
                <input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
            </div>
        </div>

        <p>the submit button only appears if a group has a class=hasSubmit. and disabled only if a checkbox checked</p>
        <p>the problem is, after grp1 is checked and next to grp2 the submit button is undisabled</p>
        <input  class="nextButton" type="submit" value="Do thing" disabled>
    </div>
</html>

这是代码

var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");

checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

Answer 1

首先，更正你的html布局并将你的提交按钮放在每个组包装器中，在你的情况下，这是一个类名为hasSubmit的元素。

然后在复选框click事件中找到它，方法是遍历其父容器，如下所示：

var checkboxes = $("input[type='checkbox']");

checkboxes.on("click", function () {
    // read it when checkbox click event is fired, instead of on page load
    var submitButt = $(this)
                     .closest(".hasSubmit")
                     .find("input[type='submit']");
    submitButt.attr("disabled", !checkboxes.is(":checked"));
});

FIDDLE

Answer 2

以下是我从您的问题中理解的内容： -

默认情况下，只有一个组可见且该按钮被禁用。
如果选中组1的任何复选框，则应启用该按钮。
点击按钮组2变为可见，按钮变为再次被禁用。
如果未选中任何可见组的所有复选框，则按钮应再次被禁用。

基于此，您需要做的是在启用下一部分后单击按钮时禁用该按钮。

$('input:checkbox').change(function () {
    var doEnableButton = true;
    $('div.hasSubmit:visible').each(function () {
        if ($(this).find('input:checked').length === 0) {
            doEnableButton = false;
            return false; //break
        }
    });

    if (doEnableButton) {
        $('.nextButton').prop('disabled', false);
    } else {
        $('.nextButton').prop('disabled', true);
    }
});

$('.nextButton').click(function (e) {
    e.preventDefault();

    if ($('.hasSubmit:hidden').length > 0) {
        $('.hasSubmit:hidden:first').show();
        $('.nextButton').prop('disabled', true);
    } else {
        //Submit the page
        alert('Page submitted');
    }
});

出于演示目的，我已将标题（h1）移到div.hasSubmit内。我还在以下jsFiddle中添加了三个部分（即3 div.hasSubmit）：here

选中第一个组复选框后，输入提交无法执行

2 个答案: