Question

我有一组单选按钮：

<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个这样的复选框。

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

例如，对于选项一个或两个，只能选择4个（20个中）复选框，并且对于这两天（收音机3），可以选择八个复选框。

我不知道如何处理这个问题。任何帮助将受到高度赞赏。

Answer 1

演示：http://jsfiddle.net/terryyounghk/xLCzp/

$('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);
});

Answer 2

一个例子是使用classes。您为每个radio button及其checkboxes提供了一个类。

<input type="radio" class='both' name="attending_days" value="both_days"/>Both days

和复选框:(请注意，复选框已禁用）

<input type="checkbox" class='both' name="checkboxes" value ="1" disabled/>One
<input type="checkbox" class='both' name="checkboxes" value ="2" disabled/>Two

然后是JS

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

Answer 3

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

var lookup = {}; 

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

然后，当点击radiobutton时，在处理程序

中

// 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.

您可以采取的另一种方法是将依赖的Id存储在data-*属性中并从那里抓取它们。

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

然后您可以使用var idStr= $(this).attr('data-dependents');来提取它们替换所有空格并将它们拆分为数组，然后使用该数组适当地启用/禁用。 var myArr = idStr.split(idStr.replace(' ',''),',');

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

注意这是粗略的，未经测试的代码。我只想让你指出正确的方向。你必须完全充实它，因为其余部分基本上重复了我已经多次展示过的东西。

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

3 个答案: