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是 NOT 选项

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.getElementsByTagName("input")

带

var inputElems = document.getElementsByClassName("testing")

您可以选择具有该特定类的复选框。

小提琴：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");
}

});

在fx之后禁用复选框。 5个复选框

2 个答案: