不能限制选中复选框的数量答案

【问题标题】：Can not limit the number of check boxes to be selected不能限制选中复选框的数量
【发布时间】：2016-12-08 14:41:02
【问题描述】：

我正在使用 foreach 循环在我的表单中生成复选框。如下所示。

<?php $index = 0;
foreach($cameramen as $n_key){ ?>
    <div class="checkbox">
        <label>
            <input type="checkbox" id="cameramen_<?php echo $index+1; ?>" name="cameramen" class="subscriber" value="<?php echo $index+1; ?>">

            <?php 
                echo $n_key->emplist3; 
                $index++;
            ?>

        </label>
    </div>
    <br/><br/>
<?php } ?>

我想将用户选择的复选框数量限制为两个。我使用了以下 javascript 函数，但它不起作用（它允许选择所有复选框）。

 $("input[name=cameramen]").change(function(){
    var max= 2;
    console.log($("input[name=cameramen]:checked").length);
    if( $("input[name=cameramen]:checked").length == max ){
        $("input[name=cameramen]").attr('disabled', 'true');
        $("input[name=cameramen]:checked").removeAttr('disabled');
    }else{
         $("input[name=cameramen]").removeAttr('disabled');
    }
  });

请有人帮我解决这个我一直在努力解决几个小时的问题。

【问题讨论】：

虽然您应该使用.prop()，而不是.attr()，但您的代码应该可以正常工作。也许您在 DOM 中的复选框可用之前绑定事件。你把它包装在准备好的处理程序中吗？或在 ↓↓↓ 下方由@ntgCleaner 提议的委托事件
尝试使用 $(document).on('change', 'input[name-cameramen]', function(){...}` 另外，告诉我们它是如何不工作的
我复制了你的代码，它似乎工作！你确定所有输入元素都有名称属性“cameraman”吗？
这里还有 php。您在安装了 php 的 Web 服务器上运行它并使用正确的语法来使用它，如 http://localhost 而不是 file:///？ HTML 源代码显示、编码或解析的 php 是什么？
@FalcoB 是的，名称属性是所有人的摄影师。

标签： javascript php jquery html checkbox

【解决方案1】：

你可以试试这个：

$(document).ready(function(){  

	$(".cb").on('click', function(e) {
  	var count = 0;
  	var list = $('.cb');
    
    $('.cb').each(function(i) {
    	
      if($(this).is(':checked')) {
      	count++;
      }
      
    });
    
    if(count > 2)
    {
    	alert('You cannot check more than 2 checkboxes!');
    	$(this).prop('checked', false);
      
      //return false;
    } else {
    	return true;
    }
    
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input class="cb" type="checkbox">Checkbox 1
  <br />
  <input class="cb" type="checkbox">Checkbox 2
  <br />
  <input class="cb" type="checkbox">Checkbox 3
  <br />
  <input class="cb" type="checkbox">Checkbox 4

</div>

希望这会有所帮助！

【讨论】：