限制/禁用/启用复选框

Question

我有一个关于此链接的问题:限制默认选中复选框.

我扩展了脚本验证的代码,这就是我想要做的.

1. 我想要一个默认选中的复选框.
2. 我想限制复选框的选择例如:如果mvp是3我应该选择3并禁用复选框的其余部分就像这样.限制复选框.
3. 如果未达到选择,我想禁用提交按钮,例如,如果给定的最大数量为5.如果未选中选择,则不会启用提交按钮.

这是我的示例代码:

var mvp = 5;

$(document).ready(function() {


    $("input:checkbox").each(function( index ) {
        this.checked = ( index < mvp );
    });

$("input:checkbox").click(function() {

  var bol = $("input:checkbox:checked").length != mvp;

  if(bol){
  alert("You have to choose "+ mvp +" mvp's only");
  this.checked = false;
  $("#button-cart").attr("disabled", true);
  }
  else{
  $("input:checkbox").not(":checked").attr("disabled",bol);
  $("#button-cart").attr("disabled", false);
  }
});

});

这是小提琴:小提琴

基于该示例,我将mvp的值设置为5.当页面加载时,检查默认5复选框.然后,如果您取消选中1,则警报将触发它表示您应该有5个mvp,然后按钮将禁用.再次选中复选框后,将出现该按钮.但是有2个左边的复选框,用户可以选择.但如果用户超过5个选项,则警报将再次触发并将其返回到5个选中的复选框.这里的问题是按钮将保持禁用状态.

你能帮我做一下这样的逻辑:D提前谢谢..

Answer 1

尝试这个，

var mvp = 5;
$(document).ready(function () {
    $("input:checkbox").each(function (index) {
        this.checked = (index < mvp);
    }).click(function () {
       en_dis= $("input:checkbox:checked").length < mvp
       $('#button-id').prop('disabled', en_dis);
       // to disable other checkboxes
       $('input:checkbox:checked').length >= mvp &&
           $("input:checkbox:not(:checked)").prop('disabled',true);
    }).change(function () {
       if ($(this).siblings(':checked').length >= mvp) {
           this.checked = false;
       }
    });
});

工作演示和更新演示