在javascript中选中的至少2个复选框上启用/禁用按钮

我有一个带有多个复选框和一个按钮的表单，默认情况下，该按钮将被禁用，但在选中至少2个或多个复选框后，该按钮应处于活动状态。如何在javascript中实现这一点。代码是

A11
A10
A9
A8
A7
A6
A5
A4
A3
A2
A1

首先，您要更改按钮，使其禁用并添加id:

<button type="submit" name="next" disabled id="enable-on-two" >Stuff</button>

然后，编写事件处理程序以实际更改按钮的状态：

function onChange() {
    document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
}

---

这里有一个小提琴演示：

试试下面的JQuery代码片段

<script type="text/javascript">
    $(document).ready(function () {
        $(":checkbox").click(function () {
            var n = $("input:checked").length;
            if (n < 2) {
                $("button").attr("disabled", "disabled");
            }
            else {
                $("button").removeAttr("disabled");
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（“：复选框”）。单击（函数（）{
var n=$（“输入：已选中”）.length；
if（n<2）{
$（“按钮”）.attr（“禁用”、“禁用”）；
}
否则{
$（“按钮”）.removeAttr（“禁用”）；
}
});
});

你可以用这种方法来做

window.onload = function() {

        var arrCheckbox = document.getElementsByName('seatdata[]');;
        arrCheckbox = Array.prototype.slice.call(arrCheckbox);

        arrCheckbox.forEach(function(oneCheckbox, key) {
            oneCheckbox.onchange = function() {

                var intCheckedLength = document.querySelectorAll('input[name="seatdata[]"]:checked').length;;

                if (intCheckedLength >= 2) {

                    document.getElementById("next").removeAttribute('disabled');
                } else {
                    document.getElementById("next").setAttribute('disabled', true);
                }
            }
        })
    }

我已经给id

下一步

提交按钮

<form id="world" name="world"> 
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|11' id="A10"  />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|10' id="A9"  />
<label for="A9">A9</label>
</td>
</tr>
</table>
<button id = "butId" type="submit" name="next">
</form> 


<script>
  $(document).ready(function(){
    $('#butId').attr("disabled","disabled");
  }
 function checkUncheck(obj){
   var count = 0;
     if(obj.value != 1){
       $('#'+obj.id).val(1);
       count+=1;
     }else{
       $('#'+obj.id).val(0);
     }
   var allCheck = document.getElementsByName('seatdata[]');
   for(var i=0;i<allCheck.length;i++){
     if(allCheck[i].value == 1){
       count+=1;
     }
    if(count >= 2){
      $('#butId').removeAttr("disabled");
    }else{
      $('#butId').attr("disabled","disabled");
    }
   }
 }
</script>

A11
A10
A9
$（文档）.ready（函数（）{
$（'#butId'）.attr（“禁用”、“禁用”）；
}
功能取消选中（obj）{
var计数=0；
如果（对象值！=1）{
$（'#'+obj.id）.val（1）；
计数+=1；
}否则{
$（'#'+obj.id）.val（0）；
}
var allCheck=document.getElementsByName（'seatdata[]）；
对于（变量i=0；i=2）{
$（“#butId”）.removeAttr（“禁用”）；
}否则{
$（'#butId'）.attr（“禁用”、“禁用”）；
}
}
}

var计数；
功能检查座椅（）
{
count=$（'input[type=“checkbox”][name=“seatdata[]”：checked'）。长度；
警报（计数）；
如果（计数>2）
{
$（“#下一步”）.removeAttr（“禁用”）；
}
其他的
{
$（“#next”）.attr（“disabled”，true）；
}
}

---

添加id=“next”已禁用提交，并将onChange=“checkseat（）”添加到每个名为seatdata[]的复选框中

他在问题中没有提到使用jQuery，也没有对其进行标记。请使用更多信息进行编辑。仅编码并“尝试此操作”答案是不鼓励的，因为它们不包含可搜索的内容，也没有解释为什么有人应该“尝试这个”。我们在这里努力成为知识的资源。

<script type="text/javascript">
    $(document).ready(function () {
        $(":checkbox").click(function () {
            var n = $("input:checked").length;
            if (n < 2) {
                $("button").attr("disabled", "disabled");
            }
            else {
                $("button").removeAttr("disabled");
            }
        });
    });
</script>

window.onload = function() {

        var arrCheckbox = document.getElementsByName('seatdata[]');;
        arrCheckbox = Array.prototype.slice.call(arrCheckbox);

        arrCheckbox.forEach(function(oneCheckbox, key) {
            oneCheckbox.onchange = function() {

                var intCheckedLength = document.querySelectorAll('input[name="seatdata[]"]:checked').length;;

                if (intCheckedLength >= 2) {

                    document.getElementById("next").removeAttribute('disabled');
                } else {
                    document.getElementById("next").setAttribute('disabled', true);
                }
            }
        })
    }

<form id="world" name="world"> 
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|11' id="A10"  />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|10' id="A9"  />
<label for="A9">A9</label>
</td>
</tr>
</table>
<button id = "butId" type="submit" name="next">
</form> 


<script>
  $(document).ready(function(){
    $('#butId').attr("disabled","disabled");
  }
 function checkUncheck(obj){
   var count = 0;
     if(obj.value != 1){
       $('#'+obj.id).val(1);
       count+=1;
     }else{
       $('#'+obj.id).val(0);
     }
   var allCheck = document.getElementsByName('seatdata[]');
   for(var i=0;i<allCheck.length;i++){
     if(allCheck[i].value == 1){
       count+=1;
     }
    if(count >= 2){
      $('#butId').removeAttr("disabled");
    }else{
      $('#butId').attr("disabled","disabled");
    }
   }
 }
</script>

<script>
var count;
function checkseat()
{
    count = $('input[type="checkbox"][name="seatdata[]"]:checked').length;
    alert(count);
    if(count > 2)
    {
        $("#next").removeAttr("disabled");
    }
    else
    {
        $("#next").attr("disabled", true);
    }
}