We Keep Coding

jQuery multi-step form: disable next button when fields unchecked

I have a multi-step form that has a "next" and "back" button on each step of the form. I'm using jQuery to enable the "next" button once the criteria for each section is met. For example: at least one checkbox is checked or a radio button is selected.
I'm having an issue where after completing a number of sections, I go back to a previous section and uncheck all checkboxes and the "next" button remains enabled.
There's a Codepen here of a rough version of what I'm working with - note all sections are visible to show how the button remains enabled once you begin checking/unchecking: https://codepen.io/abbasarezoo/pen/jZgQOV
My current code:
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
JS:
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
if ($('.panels input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
Is there any way to make this work?

when you select the input to see if is checked, you're selecting all inputs
if ($('.panels input:checked').length >= 1) {
you need to select just the inputs from the panel the user clicked
if ($(this).closest('.panels').find('input:checked').length >= 1) {
https://codepen.io/spacedog4/pen/YaWqdo?editors=1010

Please see below comment in $panelsInput.click(function (){});, you need to get the checked count for current panel (the user clicks), instead of all.
So the comparasion in your codes:
$('.panels input:checked').length >= 1
need to change to:
$(this).parent().find('input:checked').length >= 1
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
//get current input, find out its parent, then get the count of checked
if ($(this).parent().find('input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>

I thought it is interesting to handle interactions using event delegation at the form level which is more flexible:
Only one handler is loaded in memory. (By the way only a single scope is in charge of the logic behind the prev/next behavior).
You can add dynamically panels to the form (with the same markup structure) and buttons will work right away without requiring another listener registering step.
var $panelsInput = $('.panels input')
, $rowsInput = $('.rows input')
;
$('form').on('click', function (e) {
let $t = $(this)
, $target = $(e.target)
, $fieldset = $target.closest('fieldset')
, $rows = $fieldset.find('.radio-row')
;
// When a button is clicked
if ($target.is('button')) {
// Next button
if ($target.is('.next-q')) {
$fieldset.addClass('hide').next().addClass('show');
// Prev button
} else {
// Untick boxes
$fieldset.find('input').prop('checked', false).end()
// Disable appropriate button
.find('.next-q').prop('disabled', true).end()
.prev().removeClass('hide').nextAll().removeClass('show');
}
// When a checkbox is clicked
} else if ($target.is('input')) {
let $containers = ($rows.length ? $rows : $fieldset)
, containersHavingAtickedBox = $containers.filter(function() {
return !!$(this).find('input:checked').length
})
, shouldEnable = $containers.length === containersHavingAtickedBox.length
;
$fieldset.find('.next-q').prop('disabled', !shouldEnable);
}
});
fieldset ~ fieldset, .hide{display:none}
fieldset.show:not(.hide){display: block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>

jQuery multi-step form: disable 'next' button until input is filled in each section

I have a multi-step form with different input types inside each <fieldset>. I have a 'next' <button> which will trigger the next section of the form once the current fieldset has been completed.
Currently the next button is set to disabled until the user has met the criteria for that fieldset - ie: checked radios/checkboxes etc.
The issue I'm having is the jQuery I'm using to switch the button attribute to .prop('disabled', false); changes all of the buttons in the entire form to false. Is it possible to target the <button> within the current fieldset only?
Additionally, is it possible to disable the next button if a user goes back to a section and unchecks all inputs?
Here's a previous answer containing the script i'm currently using: Disable button until one radio button is clicked
I have a Codepen with a prototype of what I'm working on here: https://codepen.io/abbasarezoo/pen/jZgQOV - you can assume once live each one fieldset will show at a time.
Code below:
HTML:
<form>
<fieldset>
<h2>Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button disabled>Next</button>
</fieldset>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-4" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-5" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
<fieldset>
<h2>Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-2">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button disabled>Next</button>
</fieldset>
</form>
JS:
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
Thanks in advance for any help!

i have just change your js into this .. this will help you to enable current button in the fieldset not all of them
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});

Can't get radio values to send

I am working on making a form that should take the three questions in the form and add them up. If the end value is equal to three it should open call another function called toggletab() when the submit button is clicked. I tried this with it telling me pass or false depending on the value but it won't work. I am not good at JavaScript and it is really confusing to me. It looks like it is running each question separately instead of waiting until the end and calculating them all together. I cannot figure out why this is happening. I also am not sure how to call another function that is in a separate file if someone would know how to do that.
Thank you. This is the HTML
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0"
onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1"
onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<legend>Is your arrest record a:</legend>
<input type="radio" name="field4" value="1"
onclick="getscores4(this)"/>
IC 35-38-9-1
</label>
<label>
<input type="radio" name="field4" value="2"
onclick="getscores4(this)"/>
IC 35-38-9-2
</label>
<label>
<input type="radio" name="field4" value="3"
onclick="getscores4(this)"/>
IC 35-38-9-3
</label>
<label>
<input type="radio" name="field4" value="4"
onclick="getscores4(this)"/>
IC 35-38-9-4
</label>
<label>
<input type="radio" name="field4" value="5"
onclick="getscores4(this)"/>
IC 35-38-9-5
</label>
</fieldset>
This is the JavaScript
function getscores1(score1) {
var getscores1 = (score1.value);
sendScores(getscores1);
}
function getscores2(score2) {
var getscores2 = (score2.value);
sendScores(getscores2);
}
function getscores3(score3) {
var getscores3 = (score3.value);
sendScores(getscores3);
}
function sendScores(getscores1, getscores2, getscores3){
var total = getscores1 + getscores2 + getscores3;
answer(total);
}
function answer(total) {
if (total == 3) {
document.getElementById('totalScore').innerHTML = "false";
} else{
document.getElementById('totalScore').innerHTML = "pass";
}
}

The variables your functions are defining are not global. Their values disappear after the function returns. So your sendScores function does not actually have access to those values unless you pass them as arguments. But while sendScores takes 3 arguments, you are only sending one (the one you have access too when you call the function).
One option would be to store these as global variables, but global variables are Generally Evil™. Alternatively, you can get all the values when you click submit. Here is a working example. Note this does not catch the case when the user does not respond to one or more of the questions. Click the "run snippet" button below to see it in action.
For your final question, you can put your js in a separate file and then put <script src="path/to/your/file/js"></script> in your html to load it.
function answer(total) {
var score = 0;
if (document.getElementById('exp_yes').checked) {
score++;
}
if (document.getElementById('chg_yes').checked) {
score++;
}
if (document.getElementById('sus_yes').checked) {
score++;
}
if (score > 0) {
document.getElementById('totalScore').innerHTML = "false";
} else {
document.getElementById('totalScore').innerHTML = "pass";
}
}
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input id=exp_yes type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input id=exp_no type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input id=chg_yes type="radio" name="field2" value="0" />
<label>
Yes
</label>
<input id=chg_no type="radio" name="field2" value="1" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input id=sus_yes type="radio" name="field3" value="0" />
<label>
Yes
</label>
<input id=sus_no type="radio" name="field3" value="1" />
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>

Getting radio button values for multiple radio button sets

I'm setting up a multiple choice questionnaire with the responses being handling by radio buttons labelled A, B, C and D.
I want to identify the answer to each question by getting the form ID and the clicked button value, so that, for example, a response using the first set of radio buttons might be 1B and the second, 2D and so on (the form ID script is already up and running).
I need this to work on a page with multiple sets of radio buttons
Here is the HTML:
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
However, while I've been able to get a checked radio button value using this:
jQuery('input[name=toeic]').change(function(){
var invar = jQuery('input[name=toeic]:checked').val();
alert(invar);
});
The script is only effective within the first row of buttons clicked.
To illustrate, if in the first row of buttons to be accessed, button B is clicked then B is displayed (correct).
But, if in another row, button C clicked, B is displayed (incorrect) .. and B continues to be displayed for all subsequent button clicks. I've checked out the SO pages on this but I haven't been able to find a solution - the issue seems to be multiple sets of radio buttons.
Any help would be very much appreciated

You could do something like this :
$(document).ready(function() {
$("#finish").click(function() {
var answersList = [];
//Loop over all questoins
$(".toeic_pages").each(function() {
var questionId = $(this).attr("id");
var answer = $("input[name='toeic']:checked", $(this)).val();
//if Answer isnt provided do not update the answersList
if (answer !== undefined) {
answersList.push({
question: questionId,
answer: answer
});
}
});
console.log(answersList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
<button id="finish">Get Answers</button>

I think this is exactly what you need.
$('#1 input').on('change', function() {
alert($('#1').attr('id')+$('input[name=radioName]:checked', '#1').val());
});
$('#2 input').on('change', function() {
alert($('#2').attr('id')+$('input[name=radioName]:checked', '#2').val());
});
$('#3 input').on('change', function() {
alert($('#3').attr('id')+$('input[name=radioName]:checked', '#3').val());
});
$('#4 input').on('change', function() {
alert($('#4').attr('id')+$('input[name=radioName]:checked', '#4').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="1">
Question 1
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="2">
Question 2
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="3">
Question 3
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="4">
Question 4
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
Credits to the owner of this answer #Peter J in this question How can I know which radio button is selected via jQuery?

addClassRules() to multiple fields but only allow 1 at a minimum

So I have 10 checkbox fields, more then 1 can be selected, but at least 1 has to be selected at a minimum.
I had it working use the name="" attribute but that was not the case anymore as the name has to be unique to integrate with our CRM.
So I added the rule to use the class instead using addClassRule() and I added my own method to use a custom message for required.
But the result is they are all required. regardless if 1 or more is selected?
Here is my jQuery which is working but it requires all 10 checkbox's to be checked.
$.validator.addMethod("checkboxRequired", $.validator.methods.required, "Please select at least 1 of the values");
jQuery.validator.addClassRules('checkbox-validate', {
checkboxRequired: true
});
HTML code:
<div id="id_1" class="form-input">
<label for="test1"><input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1">1</label>
<label for="test2"><input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2">2</label>
<label for="test3"><input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3">3</label>
<label for="test4"><input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4">4</label>
<label for="test5"><input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5">5</label>
<label for="test6"><input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6">6</label>
<label for="test7"><input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7">7</label>
<label for="test8"><input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8">8</label>
<label for="test9"><input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9">9</label>
<label for="test10"><input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10">10</label>
</div>

Try require_from_group-method rule
jQuery(function($) {
jQuery.validator.addClassRules('checkbox-validate', {
require_from_group: [1, ".checkbox-validate"]
});
var validator = $('#myform').validate({
rules: {},
messages: {},
errorPlacement: function(error, element) {
if (element.hasClass('checkbox-validate')) {
element.closest('.form-input').find('.error-holder').html(error)
} else {
error.insertAfter(element);
}
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div id="id_1" class="form-input">
<label for="test1">
<input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1" />1</label>
<label for="test2">
<input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2" />2</label>
<label for="test3">
<input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3" />3</label>
<label for="test4">
<input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4" />4</label>
<label for="test5">
<input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5" />5</label>
<label for="test6">
<input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6" />6</label>
<label for="test7">
<input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7" />7</label>
<label for="test8">
<input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8" />8</label>
<label for="test9">
<input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9" />9</label>
<label for="test10">
<input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10" />10</label>
<span class="error-holder"></span>
</div>
<input type="submit" value="Save" />
</form>

You need to make your name attribute all be the same value. Then you can check how many are checked like so:
var count = $('input[name=test]:checked').size();