Question

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

＆＃13;

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

＆＃13;

Answer 1

你可以这样做。

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 2

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

- (void)btnTap:(UIButton*)sender {
     CustomCell *cell = (CustomCell*) [[sender superview] superview]; //If you have button inside another view you need to add superView on your hierarchy basis.
     NSIndexPath *indexPath = [self.tblFile indexPathForCell:cell];
     NSLog(@"Row you want to delete - %d",indexPath.row);
}

添加 id =“next”已停用以提交并添加 onChange =“checkseat（）”至名为seatdata []的每个复选框

Answer 4

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

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

这是一个小提琴演示：grepcode

Answer 6

尝试以下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>

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

6 个答案: