Question

我正在尝试使这个多维数组复选框在选择最大选择数后禁用。

问题是我不知道这个jquery代码中的问题所在。

感谢任何形式的帮助。谢谢你：D

这是我的代码。

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

Answer 1

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

看看代码。 要小心你必须在你的情况下添加你需要的PHP代码 http://jsfiddle.net/csdtesting/e0aL8aaz/

如果是二维CHECKBOX ARRAY列表

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

** 〜SOLUTION EDITION ONE

如果是一维标签列表**

让我们说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>

希望你能找到有用的东西：）！

Answer 2

经过多次测试，我终于得到了答案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>

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

2 个答案: