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

Posted 2023-05-09

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

【英文标题】：jQuery multi-row form: disable submit until each row has a radio checked

【发布时间】：2018-08-15 12:59:31

【问题描述】：

我有一个多行表单，每行都有单选单选按钮。我希望禁用最后的 <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);
     
);

【问题讨论】：

您的单选按钮每行应该有相同的名称，因为现在它们不能正常工作。

【参考方案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>

【讨论】：

$(this).closest('fieldset').find('button').prop("disabled", false);这可以简化为 $('fieldset button').prop("disabled", false);

@Sami 感谢您的建议。我已按照您建议的方式对其进行了编辑。

欢迎您 :) 请对评论进行投票。

@AnkitAgarwal 不错！这完全符合我的需要。您认为这适用于其他表单元素，例如文本、电子邮件、电话字段吗？因此，在所有表单字段都完成之前，不会删除 disabled 属性。

不，此代码不适用于所有其他不同的 HTML 表单元素。在这种情况下，代码会有点复杂，您需要相应地跟踪元素是否填充。