javascript - 每个表单仅选中 2 个复选框

Question

我在一页中有多个具有相同输入名称的表单。表单之间的唯一区别是包含它们的表单。

对于表单上的复选框组，我只想允许选中三个复选框中的两个，但我不希望一个表单中的复选框影响另一个表单中的复选框。

我现在有一个 jsFiddle。

我现在已经设置为三个复选框中只能选中两个，但这是针对整个文档的，而不是特定于表单的。

我的页面中的表单是通过循环创建的，表单的 id 是它们之间的唯一区别。

有人可以帮忙吗？

https://jsfiddle.net/likwidmonster/3zbs61q5/

$('input[type=checkbox][name=group]').on('change', function(e) {
  if ($('input[type=checkbox][name=group]:checked').length < 2) {
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
  }
  if ($('input[type=checkbox][name=group]:checked').length == 2) {
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h4>
Form 1
</h4>
  <form id="form_1">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

<div>
<h4>
Form 2
</h4>
  <form id="form_2">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

Answer 1

由于您的表单是动态的，也许这会更好用。

我确实创建了一个 jsfiddle 并将其发布在评论中，但这仅适用于这两种形式。也许您想添加更多内容？ JSFiddle Demo

this.parentNode.id;

this 用于定位触发该功能的元素，.parentNode 用于获取表单元素，.id 用于获取表单元素获取表单的 ID，以便您可以定位该特定表单，这意味着您只需要一个 if 条件即可对所有表单运行此操作!

$('form input[type=checkbox][name=group]').on('change', function(e) {
var MyForm=this.parentNode.id;
  if ($('form[id='+MyForm+'] input[type=checkbox][name=group]:checked').length == 2) {
    $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
  }else{
  $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h4>
Form 1
</h4>
  <form id="form_1">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

<div>
<h4>
Form 2
</h4>
  <form id="form_2">
    <input type="checkbox" name="group" value="1">
    <input type="checkbox" name="group" value="2">
    <input type="checkbox" name="group" value="3">
  </form>
</div>

如果您有任何疑问，请在下面发表评论，我会尽快回复您。

我希望这有帮助。快乐编码!