Question

我有3个带name="ItemGrp1"的复选框和4个带name="ItemGrp2"的复选框。

只能从ItemGrp1检查1个框，而ItemGrp2只能检查2个框。最多可以检查3个复选框。

如果用户勾选超过3个复选框，我需要阻止用户勾选复选框，如果用户从ItemGrp1检查多于1个，并且ItemGrp2检查超过2个，则停止用户停止

此处提到的名称ItemGrp1 / ItemGrp2是从数据库中检索的，可以是变量，因此不应在jQuery中直接按名称选择它们。

我目前的HTML：

<input name="ItemGrp1" type="checkbox" value="10" />
<input name="ItemGrp1" type="checkbox" value="20" />
<input name="ItemGrp1" type="checkbox" value="30" />

<input name="ItemGrp2" type="checkbox" value="40" />
<input name="ItemGrp2" type="checkbox" value="50" />
<input name="ItemGrp2" type="checkbox" value="60" />
<input name="ItemGrp2" type="checkbox" value="70" />

在Javascript中：

var val_arr = [];

$("input[name^=ItemGrp]").change(function () {

    var CBVal = $(this).val();
    if ($(this).is(':checked')) {
        if (val_arr[CBVal] != 'A') {
            val_arr[CBVal] = 'A';
        }
    }
});

更新

我正在尝试使用数组，然后检查是否选中了复选框，如果是，则将索引设置为复选框值和该索引的值为＆＃39; A＆＃39;，然后检查总数数组的计数。但问题是阵列的长度是错误的。

Answer 1

您可以在每个输入字段上设置自定义data-max属性，该属性通过数据库填充：

<input 
   name="<?php echo $field["name"]; ?>" 
   type="checkbox" value="<?php echo $field["value"]; ?>" 
   data-max="<?php echo $field["max_checked"]; ?>" 
/>

然后，您可以在javascript事件处理程序中使用以下检查：

$("input[type=checkbox]").change(function () {

  var InputName = $(this).attr("name");
  var MaxAllowed = $(this).attr("data-max");

   // Get amount of checked boxes with the same name
   if( $("input[name=" + InputName  + "]:checked").length >= MaxAllowed ){

       // Disable the remaining checkboxes of the same name
       $("input[name=" + InputName  + "]").not(":checked").attr("disabled", "disabled");

   } else {

       // Enable the inputs again when he unchecks one
       $("input[name=" + InputName  + "]").removeAttr("disabled");

});

Answer 2

使用div

分隔输入

<div class="grp1_div">
<input name="ItemGrp1" type="checkbox" value="10" />
<input name="ItemGrp1" type="checkbox" value="20" />
<input name="ItemGrp1" type="checkbox" value="30" />
</div>
<div class="grp1_div">
<input name="ItemGrp2" type="checkbox" value="40" />
<input name="ItemGrp2" type="checkbox" value="50" />
<input name="ItemGrp2" type="checkbox" value="60" />
<input name="ItemGrp2" type="checkbox" value="70" />
</div>

然后你可以打电话

$(".grp1_div input:checked").length


$(".grp2_div input:checked").length

Answer 3

试试这个http://jsfiddle.net/SMCR8/

使用新的.prop()功能：

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

JS：

var limititem1 = 1;
var limititem2 = 2;
var val_arr = [];



$("input[name^=ItemGrp]").change(function () {


  //dont check if total reached
if( $("input[name^=ItemGrp]:checked").length > ( limititem1+limititem2))
 {
     $(this).prop('checked', false);   
 }else
 //dont check if (ItemGrp1) and max reached
if( $(this).attr('name') == 'ItemGrp1' && $("input[name^=ItemGrp1]:checked").length > limititem1)
{
   $(this).prop('checked', false);      
}else
//dont check if ( ItemGrp2) and max reached
if ( $(this).attr('name') == 'ItemGrp2' && $("input[name^=ItemGrp2]:checked").length > limititem2)
{
   $(this).prop('checked', false);      
}else
//free to go 
{


    var CBVal = $(this).val();
    if ($(this).is(':checked')) {
        if (val_arr[CBVal] != 'A') {
            val_arr[CBVal] = 'A';
        }
    }
}
});

HTML：

<input name="ItemGrp1" type="checkbox" value="10" />
<input name="ItemGrp1" type="checkbox" value="20" />
<input name="ItemGrp1" type="checkbox" value="30" />
<input name="ItemGrp2" type="checkbox" value="40" />
<input name="ItemGrp2" type="checkbox" value="50" />
<input name="ItemGrp2" type="checkbox" value="60" />
<input name="ItemGrp2" type="checkbox" value="70" />

Answer 4

你能试试this here吗？

您可以使用最少的脚本更改来扩展条件和限制。如果你有很长的列表，也可以使它成为一个JSON数组来代表你的配置。

$（函数（）{ $（'input [name =“ItemGrp1”]，输入[name =“ItemGrp2”]'）。change（function（e）{

    var currentGrp=$(this).attr('name');

    var alreadyChecked=$('input[name="'+currentGrp+'"]:checked').length;
    debugger;
    if($(this).is(':checked'))
        alreadyChecked--;

    if(currentGrp=='ItemGrp1'&&alreadyChecked==1&&$(this).is(':checked'))
        $(this).removeAttr('checked');
    else if(currentGrp=='ItemGrp2'&&alreadyChecked==2&&$(this).is(':checked'))
        $(this).removeAttr('checked');

});

}）;

Answer 5

$("input[name=ItemGrp1]").change(function(){
    if ($("input[name=ItemGrp1]:checked").length >0){
        $("input[name=ItemGrp1]").not(':checked').prop('disabled',true)
    }else{
        $("input[name=ItemGrp1]").prop('disabled',false)}
   });

  $("input[name=ItemGrp2]").change(function(){
    if ($("input[name=ItemGrp2]:checked").length >1){
        $("input[name=ItemGrp2]").not(':checked').prop('disabled',true)
    }else{
        $("input[name=ItemGrp2]").prop('disabled',false)}
   });

DEMO

Answer 6

可能是这个有用的

<input class="one" name="ItemGrp1" type="checkbox" value="10" />
<input class="one" name="ItemGrp1" type="checkbox" value="20" />
<input class="one" name="ItemGrp1" type="checkbox" value="30" />
<input class="two" name="ItemGrp2" type="checkbox" value="40" />
<input class="two" name="ItemGrp2" type="checkbox" value="50" />
<input class="two" name="ItemGrp2" type="checkbox" value="60" />
<input class="two" name="ItemGrp2" type="checkbox" value="70" />

在jquery下面

$( ".one" ).on( "change", function() {      
    if(this.checked)
    {
        $(".one").each(function () {
            this.checked=false;            
        });
        this.checked =true;
    }   
});

$( ".two" ).on( "change", function() {   
    if (+$("input[name=ItemGrp2]:checked").length > 2)
    {
        this.checked=false;
    }             
});

Demo

jQuery限制已检查复选框的最大数量

6 个答案: