限制/禁用/启用复选框

Question

我有一个与此链接相关的问题：限制默认选中复选框。

我扩展了脚本的验证代码，以下是我想要做的事情：

1. 我想要一个默认选中的复选框。
2. 我希望可以限制复选框的选择，例如：如果mvp为3，那么我应该选择3并禁用其余的复选框，就像这样：限制复选框。
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);
  }
});

});

这是代码演示： 演示 基于示例，我将mvp的值设置为5。当页面加载时，默认有5个复选框被选中。如果您取消选中其中一个，则会触发警报，提示应该有5个MVP，然后按钮将禁用。一旦再次选择复选框，按钮将出现。但是还有2个剩余的复选框供用户选择。但是如果用户选择超过5个，则警报将再次触发，并将其返回到5个已选复选框。问题在于按钮仍将保持禁用状态。

您能帮我完成这个逻辑吗:D提前感谢。

- user2593560

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

演示实例 和 更新后的演示实例

- Rohan Kumar

---

谢谢@Rohan Kumar，这正是我想做的事情。只是当超过时复选框没有被禁用。 - user2593560

@user2593560 现在请检查我的答案和更新的演示。 - Rohan Kumar

工作演示很好:D 更新的演示有错误。因为如果用户在加载时勾选第6个复选框（默认有5个已勾选的复选框），第6个和第7个复选框将被禁用。但是，如果我取消勾选默认的5个复选框中的1个，第6个和第7个复选框应该再次打开以供勾选。 - user2593560

是的，依我之见，你应该使用“工作演示”，以防用户在选择了5个复选框后需要更改复选框，这样他就可以自由地进行更改。 - Rohan Kumar

Answer 2

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

$(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/

- AlienWebguy

---

页面加载时会有默认的5个选中的复选框，但是当我尝试勾选第6个复选框时，会触发警报并再次返回5个选中的复选框，但按钮仍然被禁用。 - user2593560

用户不应选择超过给定的MVP。程序应限制用户勾选除5个复选框以外的其他框。 - user2593560

Answer 3

请编写：

$("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");
    });
}

这里有更新的代码片段。

- codingrose