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

Question

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

我目前有一个来自上一个问题的解决方案(jQuery 多步骤形式：禁用"下一步"按钮，直到在每个部分中填写输入(，当您选择任何单选按钮时，它会从按钮中删除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>

j查询：

$('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>