CODEWITHSUNDEEP
javascriptjqueryhtmlformscheckbox
likwidmonster
likwidmonster

Reputation: 413

Make only 2 checkboxes checked per form

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>

Upvotes: 0

Views: 970

Answers (3)

TheNewMongoose
TheNewMongoose

Reputation: 11

Use a function to initialize your event handler for each group. Also use a different group name.

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>

Upvotes: 1

NewToJS
NewToJS

Reputation: 2772

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!

Upvotes: 2

HenryDev
HenryDev

Reputation: 4973

Here's a working solution. Hope it helps!

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

Upvotes: 2

Related Questions