Develop Reference

Jquery: limit user to select only two radio options at once and display values inside divs

I am developing a product comparator where user have to select only two products within a universe with 4 products for example.
In this case, the user would select two products within this universe with 4 products and the information of these selected products would appear inside columns (column 1 and column 2).
I tried to research some similar questions here, but unfortunatly i didn't find a correct way to do that:
Get two values from select option at once
Select and Radio options to show div
Two radio buttons are selecting at once
My question is: How can i select only two radio options, always limiting only two selections? Also, how can i display radio values from selected options inside column 1 and the second selected product inside column 2?
Below is the code that i'm using:
HTML structure that display 4 products with their respective radio buttons:
<h2 class="mb-3">Produtos</h2>
<div class="row justify-content-center">
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/cde9362a09ba4dd38c9ead6600ac074e_9366/Tenis_Duramo_SL_2.0_Preto_GW8336_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto1" id="1" value="Tênis preto">
<label class="form-check-label" for="1"></label>
</div>
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7ed0855435194229a525aad6009a0497_9366/Tenis_Superstar_Branco_EG4958_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto2" id="2" value="Tênis branco">
<label class="form-check-label" for="2"></label>
</div>
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/9326e8db8d8e4e509e42ad26010cf693_9366/Tenis_adidas_4DFWD_Pulse_Preto_Q46451_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto3" id="3" value="Tênis verde">
<label class="form-check-label" for="3"></label>
</div>
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a80a0e74201457eb1e5adcb00ff92f8_9366/Tenis_Dropset_Trainer_Azul_GZ2941_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto4" id="4" value="Tênis azul">
<label class="form-check-label" for="4"></label>
</div>
</div>
<div id="coluna1"></div>
<div id="coluna2"></div>
Below is jquery code that takes the values ​​of the selected items and display their information in respective columns. These code not allow to select more than two products:
$('.radio').change(function(){
var shoes = $(this).val();
var count = $("input[type='radio']:checked").length;
if(count > 2){
alert("you just have to select only two shoes.");
$(this).prop('checked', false);
return false;
}
$('#column1').text(shoes);
$('#column2').text(shoes);
//
});
In this case, how could i improve my code to reach the correct result? As a practical example, i I made a draft on JSFidle: https://jsfiddle.net/kg51Lvzx/

To do what you require I would suggest using checkboxes instead of radio controls. This allows the user to deselect an option.
From there you can loop through the selected items to output their text in the relevant divs.
Also, a couple of notes on the HTML. Firstly, I changed the repeated elements to use the same classes instead of incremental ids, as it makes selection much easier. Secondly, the label elements now wrap the relevant content. This means that the checkbox control and the image are clickable to make the selection.
let $output = $('.output');
let updateSelections = () => {
$output.text('');
$products.filter(':checked').each((i, el) => {
$output.eq(i).text(el.value);
});
}
let $products = $('.product').change(function() {
if ($products.filter(':checked').length > 2) {
$(this).prop('checked', false);
alert("you just have to select only two shoes.");
} else {
updateSelections();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" />
<h2 class="mb-3">Products - shoes</h2>
<div class="row justify-content-center">
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/cde9362a09ba4dd38c9ead6600ac074e_9366/Tenis_Duramo_SL_2.0_Preto_GW8336_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product1" id="1" value="Black shoes">
</div>
</label>
</div>
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7ed0855435194229a525aad6009a0497_9366/Tenis_Superstar_Branco_EG4958_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product2" id="2" value="White shoes">
</div>
</label>
</div>
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/9326e8db8d8e4e509e42ad26010cf693_9366/Tenis_adidas_4DFWD_Pulse_Preto_Q46451_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product3" id="3" value="Green shoes">
</div>
</label>
</div>
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a80a0e74201457eb1e5adcb00ff92f8_9366/Tenis_Dropset_Trainer_Azul_GZ2941_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product4" id="4" value="Blue shoes">
</div>
</label>
</div>
</div>
<div class="output" id="column1"></div>
<div class="output" id="column2"></div>

JavaScript show/hide div based on radio button. First instance conflicts with other one. When I select true/false on one, it applies to both

I would like it to function separately. I've been toying with this for a while, and I have tried putting them in separate tags, changing the $(this).attr("value") to $(this).attr("name"), and applying the changes in the HTML, but I cannot figure out how I would fix this. I am using ASP.NET MVC, with jquery-3.5.1.
Note: This is not the entire file, only the relevant parts. If I am incorrect about something and the whole file is needed, it is here: https://pastebin.com/YXp1Msj3.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
<div>
<span>Enable Two Factor Authentication? (Strongly Recommended) </span>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
</div>
<div style="display:none" class="true box">
<span>What implementation of 2FA would you like?</span>
<select class="form-control" id="TotpEnabled" name="TotpEnabled">
<option value="true">Google Authenticator</option>
<option value="false">Email</option>
</select>
</div>
<div style="display:none" class="false box">
<label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
</div>
</div>
<!--End JQUERY magic/start of next-->
<div>
<script>
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box").not(targetBox).hide();
$(targetBox).show();
});
});
</script>
<div>
<label><input id="CoachEnabled" type="radio" name="athlete" value="false"> Athlete</label>
<label><input id="CoachEnabled" type="radio" name="coach" value="true"> Coach</label>
</div>
<div style="display:none" class="true box">
<div class="form-group">
<label asp-for="CoachCode"></label>
<input asp-for="CoachCode" class="form-control" />
<span asp-validation-for="CoachCode" class="text-danger"></span>
</div>
</div>
<div style="display:none" class="false box">
<!--code left in case needed in future-->
</div>
<!--End JQUERY-->
<div>

How about putting each block in a div having same class, here i have used js_option_container and using closest() to select closest parent, so that it can show or hide only div inside that container
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(this).closest(".js_option_container").find(".box").not(targetBox).hide();
$(this).closest(".js_option_container").find(targetBox).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="js_option_container">
<div>
<span>Enable Two Factor Authentication? (Strongly Recommended) </span>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="true"> Yes</label>
<label><input id="TwoFactorEnabled" type="radio" name="TwoFactorEnabled" value="false"> No</label>
</div>
<div style="display:none" class="true box">
<span>What implementation of 2FA would you like?</span>
<select class="form-control" id="TotpEnabled" name="TotpEnabled">
<option value="true">Google Authenticator</option>
<option value="false">Email</option>
</select>
</div>
<div style="display:none" class="false box">
<label>If you choose not to enable Two Factor Authentication, you can turn it on later by visiting account settings.</label>
</div>
</div>
<div class="js_option_container">
<div>
<label><input id="CoachEnabled" type="radio" name="game" value="false"> Athlete</label>
<label><input id="CoachEnabled" type="radio" name="game" value="true"> Coach</label>
</div>
<div style="display:none" class="true box">
<div class="form-group">
<label asp-for="CoachCode"></label>
<input asp-for="CoachCode" class="form-control" />
<span asp-validation-for="CoachCode" class="text-danger"></span>
</div>
</div>
<div style="display:none" class="false box">
<!--code left in case needed in future-->
<span>Hello world</span>
</div>
<!--End JQUERY-->
<div>

Disable/Enable a text box based on radio/select option selected Javascript

I am trying to disable an input field in HTML if a radio button has a particular value. I have used Javascript functions for the same.
CODE SNIPPET 1 : (HTML RADIO BUTTON)
<div class="element-radio">
<label class="title">Children</label>
<div class="column column2">
<label>
<input type="radio" name="children" value="Yes" onChange="findselected()"/>
<span>Yes</span>
</label>
</div>
<span class="clearfix"></span>
<div class="column column2">
<label>
<input type="radio" name="children" value="No" checked="checked" onChange="findselected()"/>
<span>No</span>
</label>
</div>
<span class="clearfix"></span>
</div>
<div class="element-number">
<label class="title">No of children</label>
<div class="item-cont">
<input class="large" type="text" min="0" max="100" name="no_children" placeholder="If YES, Number of Children?" value="<?php echo $no_children?>" />
<span class="icon-place"></span>
</div>
</div>
CODE SNIPPET 2 : (JAVASCRIPT FUNCTION)
<script type="text/javascript">
function findselected() {
if (document.form.children.value == 'No') {
document.form.no_children.disabled=true;
// return false; // not sure this line is needed
} else {
document.form.no_children.disabled=false;
// return false; // not sure this line is needed
}
}
</script>
This does not work in the required way. Is there a better way to go about doing the same? I'm fairly new to Javascript so I wouldn't be able to implement a complicated code.

Update your script with the following code:
function findselected() {
var result = document.querySelector('input[name="children"]:checked').value;
if(result=="Yes"){
document.getElementById("inputtext").setAttribute('disabled', true);
}
else{
document.getElementById("inputtext").removeAttribute('disabled');
}
}
And add id attribute in your input control as id="inputtext".
<input id="inputtext" class="large" type="text" min="0" max="100" name="no_children" placeholder="If YES, Number of Children?" value="<?php echo $no_children?>" />

PrependTo() bug

I'm actually creating a shopping cart in JQuery where elements goes in a big box when you click on them. The problem is that I need "double click" to actually make the icons move to the box. By using prependTo or appendTo, the first click just move the icon to the left/right border. Why? Can you help me fix my code?
Let's see the bug in live...
Live demo: http://raphaelmartin.fr/kitcasino/jsfiddlebug.html
JSFiddle: http://jsfiddle.net/xbsoLp0u/2/
Code:
cart.html
<div id="selected"></div>
<div id="nonSelected">
<label for="blackjack"><img onclick="moveButton(this)" src="http://i.imgur.com/kfMWC91.jpg" alt="" data-checked='img/blackjack.gif' data-unchecked='img/blackjack.jpg'></label>
<INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">
<label for="chuckaluck"><img onclick="moveButton(this)" src="http://i.imgur.com/AvPEx4i.jpg" alt="" data-checked='img/chuckaluck.gif' data-unchecked='img/chuckaluck.jpg'></label>
<INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]">
<label for="roulette"><img onclick="moveButton(this)" src="http://i.imgur.com/tBEisp3.jpg" alt="" data-checked='img/roulette.gif' data-unchecked='img/roulette.jpg'></label>
<INPUT id="roulette" type="checkbox" value="Roulette" name="game[]">
<label for="stud"><img onclick="moveButton(this)" src="http://i.imgur.com/Oigq8QI.jpg" alt="" data-checked='img/stud.gif' data-unchecked='img/stud.jpg'></label>
<INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]">
<label for="holdem"><img onclick="moveButton(this)" src="http://i.imgur.com/Oc52z68.jpg" alt="" data-checked='img/holdem.gif' data-unchecked='img/holdem.jpg'></label>
<INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]">
<label for="boule"><img onclick="moveButton(this)" src="http://i.imgur.com/XFsfu7S.jpg" alt="" data-checked='img/boule.gif' data-unchecked='img/boule.jpg'></label>
<INPUT id="boule" type="checkbox" value="La Boule" name="game[]">
</div>
script.js
function moveButton(elem){
if( $(elem).parent().attr("id") == "nonSelected" ){
$(elem).detach().prependTo('#selected');
}
else{
$(elem).detach().prependTo('#nonSelected');
}
}

Use ondblclick instead of onclick. You'd also do better adding the click handler via Javascript rather than html -
$(function(){
function moveButton(){
if( $(this).closest("#nonSelected").length) {
$(this).prependTo('#selected');
}
else{
$(this).prependTo('#nonSelected');
}
}
$("#nonSelected").on("dblclick", moveButton);
});
Note: prependTo() automatically detaches, and the argument is actually an event, use "this" for the element instead...

The problem is that the parent of the unselected icon is not the #nonSelected DIV, it's the <label>. Instead of $(elem).parent(), use $(elem).closest("div").
Also, you should probably move the label along with the image.
function moveButton(elem){
if( $(elem).closest("div").attr("id") == "nonSelected" ){
$(elem).parent().prependTo('#selected');
}
else{
$(elem).parent().prependTo('#nonSelected');
}
}
Corrected Fiddle

HTML Modification
<label for="blackjack"><img onclick="moveButton(this)" src="http://i.imgur.com/kfMWC91.jpg" alt="" data-checked='img/blackjack.gif' data-unchecked='img/blackjack.jpg'>
<INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]"> </label>
<label for="chuckaluck"><img onclick="moveButton(this)" src="http://i.imgur.com/AvPEx4i.jpg" alt="" data-checked='img/chuckaluck.gif' data-unchecked='img/chuckaluck.jpg'>
<INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]"></label>
<label for="roulette"><img onclick="moveButton(this)" src="http://i.imgur.com/tBEisp3.jpg" alt="" data-checked='img/roulette.gif' data-unchecked='img/roulette.jpg'>
<INPUT id="roulette" type="checkbox" value="Roulette" name="game[]"></label>
<label for="stud"><img onclick="moveButton(this)" src="http://i.imgur.com/Oigq8QI.jpg" alt="" data-checked='img/stud.gif' data-unchecked='img/stud.jpg'>
<INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]"></label>
<label for="holdem"><img onclick="moveButton(this)" src="http://i.imgur.com/Oc52z68.jpg" alt="" data-checked='img/holdem.gif' data-unchecked='img/holdem.jpg'>
<INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]"></label>
<label for="boule"><img onclick="moveButton(this)" src="http://i.imgur.com/XFsfu7S.jpg" alt="" data-checked='img/boule.gif' data-unchecked='img/boule.jpg'>
<INPUT id="boule" type="checkbox" value="La Boule" name="game[]"></label>
Javascript
function moveButton(elem){
if( $(elem).parent().parent().attr("id") == "nonSelected" ){
$(elem).detach().prependTo('#selected');
}
else{
$(elem).detach().prependTo('#nonSelected');
}
}

finding last child div in nested fieldset

Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks

function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).

Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/

I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.