使用jquery選擇最大選擇後禁用複選框

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方法附加事件來填充數組的複選框。

看看代碼。 要小心你必須添加在需要在你的情況 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>

** 〜解的情況下，使用您的PHP代碼EDITION ONE〜

在ONE DIM的情況下ENSIONAL複選框數組列表**

假設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>