每个表单只能选中2个复选框 [英] Make only 2 checkboxes checked per form

问题描述

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

对于表单上的复选框组，我只想让两个复选框中的任意一个被选中，但我不希望复选框以一种形式影响另一种形式。

我有一个jsFiddle我现在拥有。

我已经设置好了，只有两个复选框可以从三个复选框中选出，但这是针对整个文档的，而不是特定的表单。

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

任何人都可以提供帮助吗？

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

$（'input [type = checkb （'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： aaaxax.com < form id =form_1> < input type =checkboxname =groupvalue =1> < input type =checkboxname =groupvalue =2> < input type =checkboxname =groupvalue =3> < / form>< / div>< div>< h4>表格2< / h4> < form id =form_2> < input type =checkboxname =groupvalue =1> < input type =checkboxname =groupvalue =2> < input type =checkboxname =groupvalue =3> < / form>< / div>

解决方案

我创建了一个jsfiddle并将其发布到评论中，但这只是一个好的这两种形式。也许你想添加更多？ JSFiddle Demo

  this.parentNode.id; 
  

这个用于触发元素函数 .parentNode 用于获取表单元素， .id 用于获取表单的ID所以你可以针对特定的表单，这意味着你只需要一个如果条件为所有表单运行！

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/ jquery.min.js>< / script>< div>< h4>表格1< / h4> < form id =form_1> < input type =checkboxname =groupvalue =1> < input type =checkboxname =groupvalue =2> < input type =checkboxname =groupvalue =3> < / form>< / div>< div>< h4>表格2< / h4> < form id =form_2> < input type =checkboxname =groupvalue =1> < input type =checkboxname =groupvalue =2> < input type =checkboxname =groupvalue =3> < / form>< / div>  

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

我希望这能帮上忙。快乐的编码！

I have multiple forms in one page with the same input names. The only difference between forms is the forms that contain them.

For the groups of checkboxes on my form, I only want to allow two checkboxes out of three to be checked but I don't want the checkboxes in one form to affect another.

I have a jsFiddle of what I have now.

I have it setup now that only two checkboxes can be checked out of three but that's for the entire document, not form specific.

The forms in my page are created with a loop and the id of the form is the only difference between them.

Anyone able to help with this?

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>

解决方案

Since your forms are dynamic maybe this will be of better use.

I did create a jsfiddle and post it in the comment but that's only good for those two forms. Maybe you want to add more? JSFiddle Demo

this.parentNode.id;

this is used to target the element triggering the function, .parentNode is used to get the form element and .id is used to get the ID of the form so you can target that specific form meaning you only need one if condition to run this for all the forms!

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

If you have any questions please leave a comment below and I will get back to you as soon as possible.

I hope this help. Happy coding!

这篇关于每个表单只能选中2个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！