使用jquery选择最大选择后禁用复选框

我创建了下面的解决方案来处理具有更改事件的维度数组中的复选框的这种情况。我使用了面向对象的javascript（特别是jQuery）使其尽可能清晰。这将帮助您用initializeCheckboxEvents方法附带的事件填充数组的复选框。

看一下代码小心您必须将php代码添加到需要在您的案例中使用的位置http://jsfiddle.net/csdtesting/e0aL8aaz/

如果是二维复选框阵列列表

//Disabling Checkboxes after selecting the max selection using jquery
var Checkbox = function() {
  /// <summary>
  /// Checkbox class
  /// </summary>
  var testCheckboxId = "";
  var maxCheckboxesPerGroup = 2;
  var checkedBoxes = {
    0: [],
    1: [],
    2: []
  };
  function GetCheckboxId(input) {
    //takes the checkbox group id from the name chkservicecrew[0][] = 0
    var matches = input.match(/'[('d+)]/);
    if (matches.length) {
      var num = matches[1];
      return num;
    } else return "";
  }
  function CheckIfMaximun(index) {
    /// <summary>
    /// Checks if current checked checkboxes of this group id is equal to global MAX value maxCheckboxesPerGroup
    /// </summary>
    var checkedNum = $("input[name='chkservicecrew[" + index + "][]']:checked").length;
    //console.log(checkedNum.length);
    //console.log(maxCheckboxesPerGroup)
    if (maxCheckboxesPerGroup == checkedNum) {
      return true;
    } else
      return false;
  }
  return {
    Start: function(checkedBoxes) {
      /// <summary>
      /// Start by initializing on change events
      /// </summary>
      checkbox.Tools.initializeCheckboxEvents();
    },
    Tools: {
      initializeCheckboxEvents: function() {
        //Attaches on change events to all checkboxes depend on the group
        for (index in checkedBoxes) {
          $("input[name='chkservicecrew[" + index + "][]']").each(function() {
            //console.log(this);
            $(this).change(function() {
              //console.log(this.name);
              //get the group id
              var id = GetCheckboxId(this.name);
              //True if equal ,false if not
              var isMax = CheckIfMaximun(id);
              //console.log(isMax);
              if (isMax) {
                checkbox.Tools.DisableCheckbox(id);
              } else {
                checkbox.Tools.EnableCheckbox(id);
              }
            });
          });
        }
      },
      DisableCheckbox: function(checkId) {
        //Disables checkboxes that are not checked from checkid group
        $("input[name='chkservicecrew[" + checkId + "][]']:not(:checked)").attr('disabled', 'disabled');
      },
      EnableCheckbox: function(checkId) {
        //Enables the checkboxes when checked are less than the global variable
        $("input[name='chkservicecrew[" + checkId + "][]']").removeAttr('disabled');
      }
    }
  };
};
//LETS START !!!
var checkbox = new Checkbox();
checkbox.Start();

.container {
  width: 600px;
  margin: 0 auto;
  border: 1px solid green;
  padding: 20px;
  text-align: center;
}
.container input {
  margin: 20px;
  padding: 25px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container"><b>Group 1</b>
  <br/>
  <input type='checkbox' name='chkservicecrew[0][]' value='0' />chkservicecrew 00
  <input type='checkbox' name='chkservicecrew[0][]' value='1' />chkservicecrew 01
  <input type='checkbox' name='chkservicecrew[0][]' value='2' />chkservicecrew 02
  <br/><b>Group 2</b>
  <br/>
  <input type='checkbox' name='chkservicecrew[1][]' value='0' />chkservicecrew 00
  <input type='checkbox' name='chkservicecrew[1][]' value='1' />chkservicecrew 01
  <input type='checkbox' name='chkservicecrew[1][]' value='2' />chkservicecrew 02
  <br/><b>Group 3 </b>
  <br/>
  <input type='checkbox' name='chkservicecrew[2][]' value='0' />chkservicecrew 00
  <input type='checkbox' name='chkservicecrew[2][]' value='1' />chkservicecrew 01
  <input type='checkbox' name='chkservicecrew[2][]' value='2' />chkservicecrew 02</div>

如果是一维复选框阵列列表**

假设max = 2;你想要这样的东西（jQuery）：

http://jsfiddle.net/csdtesting/z12wqLse/

var maxCheckboxes = 2;
$('input[name="chkservicecrew"]').change(function() {
  var checkedNum = $('input[name="chkservicecrew"]:checked').length;
  var allCheckoxesChecked = $('input[name="chkservicecrew"]:checked');
  var allCheckboxes = $("input[name='chkservicecrew']");
  //alert(checkedNum + " - " + maxCheckboxes);
  if (checkedNum == maxCheckboxes) {
    $(allCheckboxes).attr('disabled', 'disabled');
    $(allCheckoxesChecked).removeAttr('disabled');
    alert("ooou equals and disable!");
  } else {
    $(allCheckboxes).removeAttr('disabled');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="chkservicecrew" value="the chkservicecrew" type="checkbox">chkservicecrew
<br>
<input name="chkservicecrew" value="chkservicecrew" type="checkbox">chkservicecrew
<br>
<input name="chkservicecrew" value="chkservicecrew" type="checkbox">chkservicecrew
<br>
<input name="chkservicecrew" value="chkservicecrew" type="checkbox">chkservicecrew
<br>

希望你觉得有用：）！

经过多次测试，我终于自己得到了答案x_x

<script>
$("input[name=chkservicecrew''[<?php echo $ar_serviceID_count;?>'']''['']]").change(function(){
var max=  <?php echo $maxSelectedCrew;?>;
if( $("input[name=chkservicecrew''[<?php echo $ar_serviceID_count;?>'']''['']]:checked").length == max ){
    $("input[name=chkservicecrew''[<?php echo $ar_serviceID_count;?>'']''['']]").attr('disabled', 'disabled');
    $("input[name=chkservicecrew''[<?php echo $ar_serviceID_count;?>'']''['']]:checked").removeAttr('disabled');
}else{
    $("input[name=chkservicecrew''[<?php echo $ar_serviceID_count;?>'']''['']]").removeAttr('disabled');
}
});
</script>