Javascript 如何使用单选按钮值设置复选框选择的限制

我有一套单选按钮：

<input type="radio" name="attending_days" value="06-18-13"/>Tuesday June 18, 2013
<input type="radio" name="attending_days" value="06-18-13"/>Wednesday June 19, 2013
<input type="radio" name="attending_days" value="both_days"/>Both days

复选框：

<div id="checkboxes">
<input type="checkbox" name="checkboxes" value ="1"/>One<br />
<input type="checkbox" name="checkboxes" value ="2"/>Two <br />
<input type="checkbox" name="checkboxes" value ="3"/>Three

因此，有20个这样的复选框。

根据选择的单选按钮值，我想限制我的复选框

例如，对于选项，20个复选框中只能选择一个或两个，对于这两天，Radio 3可以选择八个复选框

我不知道如何处理这个问题。 任何帮助都将不胜感激

一个例子是使用类。给每个单选按钮及其复选框一个类

演示：

---

您可以创建ID或值的全局查找表

var lookup = {}; 

lookup['rdo1'] = ['rdo2','rdo3','rdo4']; 
lookup['rdo2'] = ['rdo5','rdo6','rdo7'];
...and so on...

然后，当单击单选按钮时，在处理程序中

// grabs all of the ids from the lookup
var ids = lookup[$(this).attr('id').toString()]

for (var i = 0; i < ids.length; i++) {
    $('#' + ids[i].toString()).addClass('enabledCss');
}
// then loop through the rest of the table and set all of their classes to 'disabledCss' or whatever. 

然后，您可以使用var idStr=$this.attr'data-dependents'提取它们； 替换所有空格并将其拆分为一个数组，然后使用该数组适当地启用/禁用。var myArr=idStr.splitidStr.replace“”、”、”

这段代码必须扩展到您所有的可能性，但这是要点。数据-*可能是最简洁的方式

---

注意，这是一个粗略的、未经测试的代码。我只是想给你指出正确的方向。你必须完全充实它，因为剩下的基本上是重复我已经多次展示的内容

使用类似$'input[name=Attenting_days]：checked、'myForm'.val的方法来选中值单选按钮，然后根据结果使用if-else语句来阻止不需要的复选框我认为您还应该提到当1用户第一次单击“两天”，然后2选择4个以上复选框时发生的情况，然后3个用户单击前两个单选按钮中的一个。然后会发生什么？好的，如果用户两天都点击，他最多可以从复选框中选择8个主题，其余的将被禁用，除非他改变主意，取消选中并重新选择其他内容。当它是前两个日期的sny时，用户最多可以选择4个主题，其余的被禁用。我理解这一部分。你可能误解了我的问题。我在指出你设计中的一个潜在漏洞。如果用户最初选择了两天，并且最初选中了4个以上的主题，然后用户决定切换回前两个单选按钮中的一个，那么现在您仍然选中了4个以上的复选框。这个边缘案例应该如何处理？或者你的意思是说，如果用户选中了4个以上的复选框，我们也必须禁用前两个单选按钮？@Spooky:谢谢你的回答。让我说得更清楚些。这些选项与特定的单选按钮无关，用户可以选择任意四个或任意八个选项，具体取决于他们想参加的日期，如果我确实显示：无，这会隐藏所有复选框吗？我不想那样做。用户可以选择，取消选择，但只限于一个限制，这将改变作为单选按钮。你刚刚让我微笑后，一个非常艰难的星期一！这太完美了大家好，这对我很有用，除了：现在Komodo向我显示了这个警告：匿名函数并不总是返回值，当我单击其他复选框时，第一个复选框将取消选中并自行检查。只是第一个复选框。关于如何解决这个问题有什么想法吗？我已经添加了“修复”。您看到的警告是因为返回false在if语句中。如果逻辑没有进入，那么它不会返回任何东西。Komodo只是警告您这种不一致性。从技术上讲，它不应该影响全局。明白这一点，但你会知道为什么我单击其他任何东西时，第一个复选框会自动选中或取消选中吗？我可能有预感。我已将选择器从输入[type=checkbox]更改为输入[name=checkbox]。我的错。原始选择器字面上是指页面上的所有复选框，太宽了。当我看到其他答案使用相同的type=checkbox选择器时，我没有想到这一点

$('input[type="radio"]').click(function(){
   if($(this).is(':checked')){
     var class = $(this).attr('class');
     $('input[type="checkbox"]').prop('disabled', true); 
     $('.'+class).prop('disabled', false);
   }
});

$('input[name=checkboxes]').on('click', function () {
    var lastOneChecked = $('input[name=attending_days]:last:checked').length,
        iLimit = lastOneChecked ? 8 : 4,
        iChecked = $('input[name=checkboxes]:checked').length;

    if (iChecked > iLimit) {
       return false;
    }

    return true; // added so that anonymous function always returns something
});

$('input[name=attending_days]').on('click', function () {
    $('input[name=checkboxes]').prop('checked', false);
});

var lookup = {}; 

lookup['rdo1'] = ['rdo2','rdo3','rdo4']; 
lookup['rdo2'] = ['rdo5','rdo6','rdo7'];
...and so on...

// grabs all of the ids from the lookup
var ids = lookup[$(this).attr('id').toString()]

for (var i = 0; i < ids.length; i++) {
    $('#' + ids[i].toString()).addClass('enabledCss');
}
// then loop through the rest of the table and set all of their classes to 'disabledCss' or whatever. 

<input type="radio" data-dependents="2,3,4,5".../>