限制/禁用/启用复选框

Question

我对此链接有疑问：Limiting default checked checkboxes。

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

1. 我想要一个默认选中的复选框。
2. 我想限制复选框的选择，例如：如果 mvp 为 3，我应该选择 3 并禁用复选框的其余部分，就像这样。 Limit Checkbox。
3. 如果未达到选择，我想禁用提交按钮，例如，如果给定的最大数量为 5。如果选择未选中 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);
  }
});

});

这是小提琴：fiddle

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

你能帮我做这种逻辑吗：D提前谢谢..

Answer 1

写：

$("input:checkbox").each(function (index) {
    this.checked = (index < mvp);
});
$("#button-id").attr("disabled", true);
disable();
$("input:checkbox").change(function () {
    var bol = $("input:checkbox:checked").length != mvp;
    if (bol) {
        alert("You have to choose " + mvp + " mvp's only");            
        $("#button-id").attr("disabled", true);
        enable();
    } else {
        $("input:checkbox").not(":checked").attr("disabled", bol);
        $("#button-id").attr("disabled", false);
        disable();
    }        
});
function enable(){
    $("input:checkbox").not(":checked").each(function(){
        $(this).removeAttr("disabled");
    });
}
function disable(){
    $("input:checkbox").not(":checked").each(function(){
        $(this).attr("disabled","disabled");
    });
}

Updated fiddle here.

Answer 2

您不应设置复选框的选中属性并禁用按钮。

给你：

$(function () {
    var $button = $('#button-id'),
        mvp     = 5;

    $("input:checkbox").each(function (index) {
        this.checked = (index < mvp);
    }).on("click", function () {
        if ($("input:checkbox:checked").length != mvp) {
            alert("You have to choose " + mvp + " mvp's only");
            $button.prop("disabled", true);
        } else {
            $("input:checkbox").not(":checked").prop("disabled", false);
            $button.prop("disabled", false);
        }
    });
});

工作演示：http://jsfiddle.net/R79cM/

Answer 3

试试这个，

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;
       }
    });
});

Working Demo 和 Updated Demo