选中第一组复选框后，输入提交将被禁用

Question

I had a form with many input groups, and all are hidden except the first group which is active. 我有一个包含许多输入组的表单，除了第一个处于活动状态的组之外，其他所有表单都被隐藏了。 The submit button is actually next group and is it should be in any group disabled. 提交按钮实际上是下一个组，应该在任何禁用的组中。 My problem is that after the first group inputs has been checked the submit button (nextbutton) stays active which is not ok. 我的问题是，在检查了第一组输入后，提交按钮（nextbutton）保持活动状态，这不正常。 Can anyone help? 有人可以帮忙吗？

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

This is the code 这是代码

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

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

Answer 1

First, correct your html layout and put your submit button inside of each group wrapper, which in your case is the element with class name hasSubmit . 首先，更正您的html布局，然后将提交按钮放在每个组包装器的内部，在您的情况下，该包装器是具有类名称hasSubmit的元素。

Then find it on checkbox click event by traversing its parent container like so: 然后通过遍历其父容器，在复选框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

Here is what I understood from your question:- 这是我从您的问题中了解的：

By default only one group is visible and the button is disabled. 默认情况下，只有一个组可见，并且该按钮处于禁用状态。
When any checkbox of group 1 is checked the button should be enabled. 选中组1的任何复选框时，应启用该按钮。
On clicking the button group 2 becomes visible and the button is again disabled. 单击按钮组2可见，并且该按钮再次被禁用。
If all the checkbox of any visible group is un-checked the button should again be disabled. 如果未选中任何可见组的所有复选框，则应再次禁用该按钮。

Based on this what you need to do is to disable the button when it is clicked after enabling the next section. 基于此，您需要做的是在启用下一部分之后，在单击按钮时禁用该按钮。

$('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');
    }
});

For demonstration purpose I've moved the heading ( h1 ) inside the div.hasSubmit . 出于演示目的，我将标题（ h1 ）移到了div.hasSubmit 。 Also I've added three sections (that is 3 div.hasSubmit ) in the following jsFiddle: here 另外，我在以下jsFiddle中添加了三个部分（即3 div.hasSubmit ）：这里

选中第一组复选框后，输入提交将被禁用

问题描述

2 个解决方案

解决方案1
0 2015-11-10 00:17:33

解决方案2
0 已采纳 2015-11-10 03:17:23

选中第一组复选框后，输入提交将被禁用

问题描述

2 个解决方案

解决方案1 0 2015-11-10 00:17:33

解决方案2 0 已采纳 2015-11-10 03:17:23

解决方案1
0 2015-11-10 00:17:33

解决方案2
0 已采纳 2015-11-10 03:17:23