限制跨组的单选按钮选择

Question

我知道如何限制用户可以选择的复选框的数量，但不知道如何使用多组单选按钮来做到这一点。

场景是这样的。第一组单选按钮允许用户 select 一个数字 - 从 1 到 6 的任何数字。我得到的值是这样的：

    $('#input_3_1 input').on('change', function() {
    var selectedVal = "";
    var selected = $("#input_3_1 input[type='radio']:checked");
    if (selected.length > 0) {
        selectedVal = selected.val();
    }
    });

之后是一系列单选组，每个单选组都有多个选项，像这样：

    <div id="input_3_2" class="limit-this">
    <input name="input_2" type="radio" value="Choice 1">
    <input name="input_2" type="radio" value="Choice 2">
    <input name="input_2" type="radio" value="Choice 3">
    </div>

    <div id="input_3_3" class="limit-this">
    <input name="input_3" type="radio" value="Choice 1">
    <input name="input_3" type="radio" value="Choice 2">
    <input name="input_3" type="radio" value="Choice 3">
    </div>

对于可变数量的字段依此类推，最多可达 10 个。

我需要用户能够 select 仅在第一个字段中 select 编辑所有这些其他字段中的选项数量。

谁能给我指出正确的方向？

Answer 1

$('.limit-this input[type="radio"]').click(function(){
    var a = $('.limit-this input[type="radio"]:checked').length;
    if(a>selectedVal) if($(this).is(':checked')) $(this).removeAttr('checked');
});

见DEMO

在 DEMO2 中，我启用了取消选中当前选中的项目，以防用户改变主意并想要进行其他选择：

$('.limit-this input[type="radio"]').click(function(){
    var a = $('.limit-this input[type="radio"]:checked').length;
    var b = ($(this).is(':checked')?1:0);
    if(a>selectedVal){ if($(this).is(':checked')){ $(this).removeAttr('checked');}}
    else{

     if($(this).is(':checked')&&$(this).data('val')==1) {$(this).removeAttr('checked');
         $(this).data('val', 0);  
     }else
       $(this).data('val', b);    
    }

});

限制跨组的单选按钮选择

Limiting radio button selection across groups

jquery

limit

radio-button