使用JavaScript，如果至少有一个复选框被选中，则启用按钮。

Question

如何在至少选中一个复选框时启用提交按钮？

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

- divya

---

你尝试过什么吗？ - Rajesh

这个和那个或许会有所帮助：这里和那里。 - oneturkmen

你没有打标签jquery，但是你的问题是关于jquery的。 - asdf_enel_hak

你的按钮缺少 name 属性。 - Rajesh

@divya 请不要根据评论或任何答案的建议更新问题。 - Rajesh

Answer 1

由于您标记的是 JavaScript 而不是 JQuery，所以这里提供一个 JavaScript 解决方案。

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>

- Milan Chheda

---

此函数不兼容Internet Explorer。 - divya

另外，既然OP已经在使用jQuery，我们可以假设jQuery的解决方案是可接受的。我们甚至可以编辑问题并打上标签。 - Rajesh

我提到并给出了一个简单的JavaScript解决方案，而不是使用JQuery。这并不意味着要点踩。 - Milan Chheda

Downvote 是因为你缺少解释。这就是我的第一条评论。另外，OP 的代码是否存在需要修复的问题？如果有，请具体说明。 - Rajesh

Answer 2

给复选框相同的id，并在复选框的点击事件上编写JavaScript代码，以启用/禁用按钮，如果有任何一个被点击，则会生效。

通过给予相同的名称，只允许选择其中之一。

- Sanjeev S

Answer 3

在提交按钮上添加名称。

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

- ajithes1

Answer 4

尝试这个可能会帮助你。

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>

- Nisal Edu

Answer 5

1. 改进代码的建议

为了使您的代码按预期运行，您必须向您的添加"name"属性：

$("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 代码的建议

如果您愿意，您也可以使用纯 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>

- Rene