0

我有一组单选按钮：

<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）可以选择八个复选框。

我不知道如何解决这个问题。任何帮助将不胜感激。

4

3 回答 3

2

演示：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);
});
于 2013-04-22T20:55:38.283 回答
0

一个例子是使用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);
   }
});
于 2013-04-22T20:36:07.177 回答
0

您可以创建 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.

您可以采取的另一条路线是将依赖 ID 存储在data-*属性中并从那里获取它们。

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

然后，您可以使用 var idStr= $(this).attr('data-dependents'); Replace all spaces 将它们拉出并将它们拆分为一个数组，然后使用该数组适当地启用/禁用。变量myArr = idStr.split(idStr.replace(' ',''),',');

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

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

于 2013-04-22T21:01:26.387 回答