限制用户在jQuery中选中复选框

我有一堆复选框，我想限制用户根据selectbox值选中复选框

例如，如果用户在selectbox中选择值-3，则他只能选中3个复选框（任意三个）

演示：

HTML

<select id="count">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select><br/><br/>

<div class="checkbox">
  <input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
  <label for="checkbox-1">HTML</label>
  <br />
  <input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
  <label for="checkbox-2">CSS</label>
   <br /> 
    <input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
  <label for="checkbox-3">HTML</label>
  <br />
  <input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
  <label for="checkbox-5">CSS</label>
    <br />
     <input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
  <label for="checkbox-5">HTML</label>
  <br />
  <input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
  <label for="checkbox-6">CSS</label>
</div>

1.
2.
3.
4.
5.
6.



HTML


CSS


HTML


CSS


HTML


CSS

---

我该怎么做？有人能帮我吗？

如果你的意思是选项val=3->可以选中3个复选框，那么试试这个

Javascript

$(document).ready(function(){
    $('#count').on('change', function(){
        $('input[type=checkbox]').prop('checked', false);
    });

    $('input[type=checkbox]').on('change', function(){
        if($('input[type=checkbox]:checked').length > $('#count').val()){
            $(this).prop('checked', false);
        }
    });
});

用这个

$('input[id^="checkbox-"]').hide();

$('select').on('change', function (e) {
    var valueSelected = this.value;
    for(i=1;i<=valueSelected;i++)
    {
        $('#checkbox-' + i).show();
    }
});

$（'input[id^=“checkbox-”）.hide（）；
$（'select'）。关于（'change'，函数（e）{
var valueSelected=此值；
对于（i=1；i根据Pavlo的有益评论进行更新
演示：

JQuery
这可以在一次条件检查中完成，代码非常少：

$('input[type=checkbox]').on('click', function(event){
    if($('div.checkbox input[type=checkbox]:checked').length > $('#count').val())
    {
        event.preventDefault();
    }
});

查看fiddle示例。
为了清晰起见：如果用户从下拉列表中选择了
3
，这是否意味着他可以选中3个复选框，或者只选中
checkbox-3
？是的，那么他只能选中3个复选框@hexblot@NareshKamireddy-但在组合框中，哪3个复选框显示了upons选择的3个复选框？@Bibhu基于订单，请重写您的问题将给出一个具体示例，说明对于给定的单个选择，应选中哪个复选框）在更改选择框时，这会清除已选中的框，无论允许的数量是增加还是减少。这是询问者想要的行为吗？我想，从用户的角度来看，当我点击一堆东西并意识到我缺一个时，我不应该再重新检查所有东西了。这是一种解决方案n断开复选框，而不是禁用它们。@gvee clear ready checkbox不是本主题的问题，我只是添加了此行为以进行测试。@Pavlo限制用户选中复选框（看不到单词“disable”）它是如何打破复选框的？没有任何视觉反馈表明选中复选框是无效的。是的，你已经完成了任务，但你的解决方案不是设计师会满意的。不错，但脚本不应该选择取消选中的内容。（为什么是前N个，而不是最后N个或随机N个？）。也应该缓存选择器。@Pavlo我是根据我在问题注释中的解释这样做的：Q：“在组合框中选择3时，显示哪3个复选框？”.A：“基于顺序”。这很公平。但是
preventDefault
？它应该被禁用，而不是被破坏。工作正常时，您应该更新答案（并缓存这些选择器）。
$('input[type=checkbox]').on('click', function(event){
    if($('div.checkbox input[type=checkbox]:checked').length > $('#count').val())
    {
        event.preventDefault();
    }
});