jQuery多行表单:禁用提交，直到对每一行进行无线电检查为止。

Question

我有一个多行表单，每行都有一个单选按钮。我希望禁用最后一个<button>标记，直到从每一行选中单选按钮为止。

我目前有一个来自上一个问题(jQuery multi-step form: disable 'next' button until input is filled in each section)的解决方案，当您选择任何单选按钮时，该解决方案将从按钮中删除disabled属性，但如果可能的话，我希望更具体一些。

这个是可能的吗？下面是我目前正在做的工作的代码：https://codepen.io/abbasarezoo/pen/vdoMGX --正如您在任何行中点击任何收音机时所看到的那样，禁用的属性会脱落。

HTML：

<form>
    <fieldset>
        <div class="radio-group">
            <h2>Select one answer per row</h2>
            <h3>Row 1</h3>
            <label for="radio-1">Radio 1</label>
            <input type="radio" id="radio-2" name="radio-row-1" />
            <label for="radio-2">Radio 2</label>
            <input type="radio" id="radio-2" name="radio-row-2" />
            <label for="radio-3">Radio 3</label>
            <input type="radio" id="radio-3" name="radio-row-3" />
        </div>
        <div class="radio-group">
            <h3>Row 2</h3>
            <label for="radio-4">Radio 1</label>
            <input type="radio" id="radio-4" name="radio-row-4" />
            <label for="radio-5">Radio 2</label>
            <input type="radio" id="radio-5" name="radio-row-5" />
            <label for="radio-6">Radio 3</label>
            <input type="radio" id="radio-6" name="radio-row-6" />
        </div>
        <button disabled>Next</button>
    </fieldset>
</form>

jQuery：

$('fieldset input').click(function () {
    if ($('input:checked').length >= 1) { 
        $(this).closest('fieldset').find('button').prop("disabled", false);
    }
    else {
        $('button').prop("disabled", true);
    } 
});

Answer 1

您需要为单选按钮组指定相同的名称，以便每一行只选择一个单选按钮。然后，您可以简单地将选中单选按钮的长度与单选按钮组的长度进行比较，

​

$('fieldset input').click(function () {
    var radioLength = $('.radio-group').length; 
    if ($('input:checked').length == radioLength) { 
        $('fieldset button').prop("disabled", false);
    }
    else {
        $('button').prop("disabled", true);
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <fieldset>
        <div class="radio-group">
            <h2>Select one answer per row</h2>
            <h3>Row 1</h3>
            <label for="radio-1">Radio 1</label>
            <input type="radio" id="radio-2" name="radio-row-1" />
            <label for="radio-2">Radio 2</label>
            <input type="radio" id="radio-2" name="radio-row-1" />
            <label for="radio-3">Radio 3</label>
            <input type="radio" id="radio-3" name="radio-row-1" />
        </div>
        <div class="radio-group">
            <h3>Row 2</h3>
            <label for="radio-4">Radio 1</label>
            <input type="radio" id="radio-4" name="radio-row-2" />
            <label for="radio-5">Radio 2</label>
            <input type="radio" id="radio-5" name="radio-row-2" />
            <label for="radio-6">Radio 3</label>
            <input type="radio" id="radio-6" name="radio-row-2" />
        </div>
        <button disabled>Next</button>
    </fieldset>
</form>

​