每个表单只选中 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>

如果您有任何问题，请在下方留言，我会尽快回复您。

我希望这会有所帮助。编码愉快！

Answer 2

这是一个可行的解决方案。希望对您有所帮助！

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.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 3

使用函数为每个组初始化事件处理程序。同时使用不同的组名。

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

function setupCheckboxGroup(grpName){

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

}

setupCheckboxGroup('group');
setupCheckboxGroup('group2');

<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="group2" value="1">
    <input type="checkbox" name="group2" value="2">
    <input type="checkbox" name="group2" value="3">
  </form>
</div>