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

Question

我有一个带有多个复选框和一个按钮的表单，默认情况下该按钮将被禁用，但在检查至少 2 个或超过 2 个复选框后，该按钮应该变为活动状态。我怎么能在javascript中做到这一点。代码是

<form id="world" name="world">
  <table>
    <tr>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
        <label for="A11">A11</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|11' id="A10" />
        <label for="A10">A10</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|10' id="A9" />
        <label for="A9">A9</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|9' id="A8" />
        <label for="A8">A8</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|6' id="A7" />
        <label for="A7">A7</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|5' id="A6" />
        <label for="A6">A6</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|4' id="A5" />
        <label for="A5">A5</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|3' id="A4" />
        <label for="A4">A4</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
        <label for="A3">A3</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
        <label for="A2">A2</label>
      </td>
      <td>
        <input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
        <label for="A1">A1</label>
      </td>
    </tr>
  </table>
  <button type="submit" name="next" />
</form> 

Answer 1

在JQuery sn-p下面试试；

<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>

Answer 2

你可以这样做。

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 next 提交按钮

Answer 3

<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>

Answer 4

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

添加 id="next" disabled 以提交并将 onChange="checkseat()" 添加到每个名为 seatdata[]

的复选框

Answer 5

首先，您要更改按钮，使其开始禁用并添加一个 id：

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

接下来，编写一个函数来计算选中复选框的数量：

function numberOfCheckboxesSelected() {
    return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}

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

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

最后，将该事件处理程序绑定到您的整个表单，因为复选框中的单个 change 事件会冒泡：

document.getElementById('world').addEventListener('change', onChange, false);

这是一个小提琴演示：https://jsfiddle.net/wphgs09r/

Answer 6

var checkboxes = $('[type="checkbox"]')
checkboxes.change(() => {
    $("button").prop( "disabled", checkboxes.filter(":checked" ).length >= 2 ? false : true )
})