jQuery多行表单：禁用提交，直到每行都选中了一个单选

Question

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

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

这可能吗？这是我目前正在处理的 Codepen：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>