如果使用 javascript 选中了至少一个复选框，则启用一个按钮答案

【问题标题】：Enable a button if atleast one checkbox is checked using javascript如果使用 javascript 选中了至少一个复选框，则启用一个按钮
【发布时间】：2017-11-23 06:27:03
【问题描述】：

当我选中至少 1 个复选框时如何启用提交按钮？

$("input[name='vehicle']"), submitButt = $("input[name='Submit']");
var checkboxes = $("input[name='vehicle']"),
  submitButtList = $("#Submit");
checkboxes.click(function() {
  submitButt.attr("disabled", !checkboxes.is(":checked"));
  if (!checkboxes.is(":checked")) {
    submitButtList.addClass("disabled");
  } else {
    submitButtList.removeClass("disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

【问题讨论】：

你有没有尝试过？
This 和 that 可能会有所帮助。
你没有标记 jquery 但你的问题是 jquery
您在按钮上缺少name 属性。
@divya 请不要根据评论中的建议或任何答案更新问题

标签： javascript checkbox

【解决方案1】：

为复选框提供相同的 id，并在复选框的 on click 事件上编写 javascript 代码，如果单击任何一个，则启用/禁用按钮。

通过提供相同的名称，只能选择两个中的一个

【讨论】：

【解决方案2】：

这是一个JavaScript 解决方案，因为您标记了Javascript 而不是Jquery

function callFunction() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

  document.querySelectorAll('input[type="submit"]')[0].disabled = true;
  if (checkedOne) {
    document.querySelectorAll('input[type="submit"]')[0].disabled = false;
  }
}

<input type="checkbox" name="vehicle" onchange="callFunction()" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" onchange="callFunction()" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

jquery解决方案：

检查选中复选框的长度并使用prop 禁用或启用按钮。

$("input[name='vehicle']").on('change', function() {
  $("input[type='submit']").prop('disabled', !$("input[name='vehicle']:checked").length);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

【讨论】：

this => 功能与 Internet Explorer 不兼容
另外，由于 OP 已经在使用 jQuery，我们可以假设 jQuery 解决方案是可以接受的。我们甚至可以编辑问题并标记它
我已经提到并给出了一个简单的 JavaScript 解决方案，而不是使用 JQuery。这并不意味着投反对票。
投反对票是因为您缺少解释。因此，我的第一条评论。另外，OP的代码有什么问题需要修复吗？如果是，请注明。

【解决方案3】：

试试这个可能对你有帮助

function myFunction() {

  if (document.getElementById('bike').checked || document.getElementById('car').checked) {
   
    document.getElementById("btn").disabled = false;
  } else {

    document.getElementById("btn").disabled = true;
  }

 



}

<input id="bike" type="checkbox" onchange="myFunction()" name="vehicle" value="Bike"> I have a bike<br>
<input id="car" type="checkbox" onchange="myFunction()" name="vehicle" value="Car"> I have a car<br>
<input type="submit" id="btn" value="Submit" disabled>

【讨论】：

【解决方案4】：

为提交按钮添加名称。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" value="Submit" name="Submit" disabled>

【讨论】：

【解决方案5】：

1。改进代码的建议

您必须添加“名称”属性才能按预期运行代码：

$("input[name='vehicle']"), submitButt = $("input[name='Submit']");
var checkboxes = $("input[name='vehicle']"),
  submitButtList = $("#Submit");
checkboxes.click(function() {
  submitButt.attr("disabled", !checkboxes.is(":checked"));
  if (!checkboxes.is(":checked")) {
    submitButtList.addClass("disabled");
  } else {
    submitButtList.removeClass("disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car<br>
<input type="submit" name="Submit" value="Submit" disabled>

2。改进 Milan Chheda 纯 JavaScript 代码的建议

如果你愿意，你也可以使用 enter link description here First answer 和简写的纯 JavaScript：

你可以替换：

  document.querySelectorAll('input[type="submit"]')[0].disabled = true;
  if (checkedOne) {
    document.querySelectorAll('input[type="submit"]')[0].disabled = false;
  }

与

    document.querySelectorAll('input[type="submit"]')[0].disabled = !checkedOne;

function callFunction() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

  document.querySelectorAll('input[type="submit"]')[0].disabled = !checkedOne;
}

<input type="checkbox" name="vehicle" onchange="callFunction()" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" onchange="callFunction()" value="Car"> I have a car<br>
<input type="submit" value="Submit" disabled>

【讨论】：