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

Question

当我选中至少 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>

Answer 1

这是一个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>

Answer 2

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

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

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

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

Answer 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代码的建议

如果需要，您也可以在此处使用输入链接描述以较短形式使用纯 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>