禁用fx后的复选框。 5选中的复选框

Question

我想，这是什么脚本：http://www.javascriptkit.com/script/script2/checkboxlimit.shtml是做，但我有一个问题，因为我后我的复选框以PHP数组

这是我使用的形式代码：

<?php 
$badges = get_user_badges($UserID, true, false); 

$html=''; 
foreach ($badges as $Badge) { 
    list($ID, $BadgeID, $Tooltip, $Name, $Image, $Auto, $Type, $Row,, $Show) = $Badge; 
    if($Show == '1') $selected = ' checked'; else $selected = ''; 
    $html .= '<label><input id="showBadge" name="showBadge['. $ID .']" type="checkbox"'. $selected .'> <img src="'.STATIC_SERVER.'common/badges/'.$Image.'" title="'.$Name.'. '.$Tooltip.'" alt="'.$Name.'" /></label> '; 
} 
echo $html; 
?> 

使用jQuery是不一种选择，由于冲突的脚本

Answer 1

你可以在jQuery的做到这一点很容易，但因为你的JavaScript希望它具体请参阅我的回答如下：

在PHP：

$html .= '<label><input id="showBadge" onclick="counter(this)" name="showBadge['. $ID .']" type="checkbox"'. $selected .'> <img src="'.STATIC_SERVER.'common/badges/'.$Image.'" title="'.$Name.'. '.$Tooltip.'" alt="'.$Name.'" /></label> '; 

JS：

var count = 0; 
function counter(element){ 
    if(count<5){ 
     //do something 
    }else{ 
    element.checked = !element.checked; 
    } 
    count++; 
    alert(count); 
} 

小提琴：http://jsbin.com/OyIMebis/1

更新：要包含复选框的总数检查状态

var count = 0; 

function counter(element) { 
    if (count < 5) { 
     //do something 
    } else { 
     element.checked = !element.checked; 
    } 
    count++; 

    var inputElems = document.getElementsByTagName("input"), 
     totalCount = 0; 
    for (var i = 0; i < inputElems.length; i++) { 
     if (inputElems[i].type === "checkbox" && inputElems[i].checked === true) { 
      totalCount++; 
     } 
    } 
    alert("Total Checkbox = "+totalCount); 
} 

小提琴：http://jsbin.com/OyIMebis/2/

更新2：

只需使用

var inputElems = document.getElementsByClassName("testing") 

更换

var inputElems = document.getElementsByTagName("input") 

，你可以选择与特定类别的复选框。

小提琴：http://jsbin.com/OyIMebis/4/ 干杯

Answer 2

试试这个代码：添加一个类的每个复选框。

$html .= '<label><input class="chk_bx" id="showBadge" name="showBadge['. $ID .']" type="checkbox"'. $selected .'> <img src="'.STATIC_SERVER.'common/badges/'.$Image.'" title="'.$Name.'. '.$Tooltip.'" alt="'.$Name.'" /></label> '; 

在JS：

$(".chk_bx").live("click",function(){ 
if($('.chk_bx:checked').length == 5) 
{ 
    $(".chk_bx:not(:checked)").attr("disabled", true); 
} 
else 
{ 
    $(".chk_bx:not(:checked)").removeAttr("disabled"); 
} 

});