Develop Reference

jquery radio button each -not working

i am trying to loop through the radio buttons by name with 'each' function..the each function is not working and it is applying the logic only once and it is not looping for the next time..
My use case is, when user selects value from the select dropdown, needs to enable both the radio buttons and if the user deselects the dropdown- needs to disable back..
Here in my case, each function is looping only once and after that it is getting exit from it..Need help in figuring disable/enable based on dropdown selection..
html code:-
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
jquery:
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(){
$("#authPermission").prop('disabled',false);
$("#authPermission").prop('checked',false);
});
}
else{
$("#authPermission").each(function(){
$("#authPermission").prop('disabled',true);
$("#authPermission").prop('checked',false);
});
}
});

You cannot have more than one element with the same ID. So, I would change your code by removing the id attribute and putting a new value for the class attribute, then fetch the object using jquery class selector.
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser authPermission" value="anyUser" name="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser authPermission" value="groupUser" name="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
And jQuery code :
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(elemId, elem){
$(elem).prop('disabled',false);
$(elem).prop('checked',false);
});
}
else{
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
}
});
But, if we take a better look at your code, I do not understand why you want to use "each". You can achieve the same thing without it :
// Following code :
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
// Does the same thing as this one :
$(".authPermission").prop('disabled', true).prop('checked', false);

I refactored your code. Also enables the input field when the appropriate radio is clicked. This sould work:
function updateUI() {
var select = $("#authType");
var value = select.val();
var should_appear = (value.length == 0);
$("input:radio[name='authPermission']").attr('disabled',should_appear);
}
//binding...
$("input:radio").on("click", function() {
var should_display_textbox = !($(this).val() === "groupUser");
console.log(should_display_textbox);
$("input:text[name='authPermissionValue']").attr('disabled', should_display_textbox);
});
$("#authType").change(function(){
updateUI();
});
$(document).ready(function() {
updateUI(); //update also when page load
});

Something like this maybe?
$("#authType").change(function(){
var disabled = !$(this).val() ? true : false;
$("input:radio[name='authPermission']").each(function(){
$(this).prop('disabled', disabled );
$(this).prop('checked',false);
});
});

Change value in div on changing drop down using jquery

I need to change value on a div according to selection in drop down box - tried this code but script does not seem to work
HTML dropdown list:
<form action="https://ccart.com/cart" method="post">
<input type="hidden" name="name" value="T-shirt" />
<input type="hidden" name="price" value="54" />
<select name="size" id="Field">
<option value="1{p-50}">Small</option>
<option value="2{p-24}">Medium</option>
<option value="3">Large</option>
</select>
<input type="submit" value="Lets go" class="cart"/>
</form>
<div id="1" class="box">4</div>
<div id="2" class="box">30</div>
<div id="3" class="box">54</div>
I tried using:
$(document).ready(function () {
$('.box').hide();
$('#1').show();
$('#Field').change(function () {
$('.box').hide();
$('#' + $(this).val()).show();
});
});
Jquery called:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Dropdown working fine but cannot get to show div.
Working fine now but problems changing id from numeric to string as recommended
<option value="Small{p-50}">Small</option>
<option value="Medium{p-24}">Medium</option>
<option value="Large">Large</option>
<div id="Small" class="box">4</div>
<div id="Medium" class="box">30</div>
<div id="Large" class="box">54</div>
Code:
$('.box').hide();
$('#Small').show();
$('#Field').change(function () {
$('.box').hide();
$('#' + parseInt($(this).val())).show();
});
If i leave original id values of 1,2 etc it works perfect

It's failing because of this:
<option value="1{p-50}">Small</option>
<option value="2{p-24}">Medium</option>
Because none of your divs have an ID attribute of #1{p-50} it won't be shown.
Unless the {p-50} or {p-24} are used for anything, just change them to this:
<option value="1">Small</option>
<option value="2">Medium</option>
JSFiddle
Also, as Sarfraz Mentioned, your IDs should also not be a number alone.

Well values of the dropdown items doesn't match ID's of your divs. If you really want to use them anyway you should use parseInt:
$('.box').hide();
$('#1').show();
$('#Field').change(function () {
$('.box').hide();
$('#' + parseInt($(this).val())).show();
});
parseInt will parse 1{p-50} to 1 and everything will work.
Note: since numeric ids is not valid in HTML4 you should make sure your define HTML5 doctype which is more tolerant about numbers as identifiers.

jquery set previous inputs to 0

I have a checkbox at the end of 5 inputs and one dropdown. I am trying through jquery to set all the inputs and the dropdown before the checkbox to 0.
There will be many employees listed so it has to be only the ones before the checkbox.
My feeble attempt at the jquery. I have the .on as sometimes it will be called through ajax
$(document).ready(function () {
$(document).on('click', '.fasCheck', function(){
if ($(this).attr("checked") == "checked"){
$(this).prev().parent().prev(".payWeek").next('input').prop('checked', true);;
} else {
}
});
});
The html:
<div class="returns" id="employee">
<h3>David Wilson</h3>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek1">Pay Week1</label>
<input type="number" id="MonthlyReturn0PayWeek1" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week1]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek2">Pay Week2</label>
<input type="number" id="MonthlyReturn0PayWeek2" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week2]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek3">Pay Week3</label>
<input type="number" id="MonthlyReturn0PayWeek3" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week3]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek4">Pay Week4</label>
<input type="number" id="MonthlyReturn0PayWeek4" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week4]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeek5">Pay Week5</label>
<input type="number" id="MonthlyReturn0PayWeek5" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week5]">
</div>
<div class="payWeek">
<label for="MonthlyReturn0PayWeeks">Pay Weeks</label>
<select id="MonthlyReturn0PayWeeks" name="data[MonthlyReturn][0][pay_weeks]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="payWeek">
<label for="FAS">FAS</label>
<input type="checkbox" class="fasCheck" name="FAS">
</div>
</div>

$(this).attr("checked") == "checked" won't work, you already know to use .prop(). Or just use this.cecked without any jQuery.
.prev().parent() - the prev is absolutely unnecessary, all siblings do have the same parent node.
.prev(".payWeek") - seems like you want to use .prevAll() instead.
.next('input') - you don't want to find the next sibling, but a descendant. Use .children() or .find().
.prop('checked') - while appropriate for checkboxes, you have number inputs here and need to set their value, via .val().
So change it to
$(document).ready(function() {
$(document).on('click', '.fasCheck', function() {
if (this.checked) {
$(this)
.parent()
.prevAll(".payWeek")
.find('input')
.val('0');
}
});
});

From the clicked checkbox, find the closest payWeek, then select all previous payWeeks, and find all inputs within those payWeeks and set the value to zero :
$(document).ready(function () {
$(document).on('click', '.fasCheck', function(){
if ( this.checked ) {
$(this).closest('.payWeek')
.prevAll('.payWeek')
.find('input')
.val('0');
} else {
}
});
});

$(document).on('click', '.fasCheck', function(){
var $this = $(this),
$parent = $(this).parents('.returns').eq(0),
$inputs = $parent.find('input');
if ($this.prop("checked")){
$inputs.val('0');
}
});

jquery show and hide divs

I have a form with a yes|no question displayed by radio selectors. I have two divs each one containing different drop downs based on the yes|no response. I cannot figure out how to show one and hide the other.
jsFiddle of this code
$(document).ready(function(){
$("input[name=radio_button]").change(function() {
var test1= $(this).val();
$("#"+test1).show();
$("div.test2").hide();
});
$("input[name=radio_button]").select(function() {
var test2= $(this).val();
$("#"+test2).show();
$("div.test1").hide();
});
});
<p>
<label class="required"> </label>
Yes <input name="radio_button" id="radio_button" type="radio" value="test2" onChange="" />
No <input name="radio_button" id="radio_button" type="radio" value="test1" />
</p>
<p>
<label class="required">Device: </label><br />
<div id="test1" class="test1_div">
<label style="font-weight:600;">test1</label>
<select name="order.item" id="item" >
<option value="default">Please Select item</option>
</select>
</div>
<div id="test2" class="test2_div">
<label style="font-weight:600;">item2</label>
<select name="order.item" id="device">
<option value="default">Please Select Device</option>
</select>
</div>
</p>

To make one hidden and other visible , you have to first hide both the blocks then add show() on the block you want to see. This will work for you.

Assuming your markup (html) is correct, try the following. It binds to click-events of those radio buttons (both of them), always hides both divs first, and then shows the appropiate div only (the one that belongs to the radio button clicked).
$(document).ready(function(){
$("input[name=radio_button]").click(function() {
var test= $(this).val();
$("div.test1, div.test2").hide(); //Hide both divs
$("#"+test).show();
});
});

Show (Visible/Hidden NOT Show/Hide) HTML Element based on form select box selection

The following worked perfectly for my needs. Took the state of a checkbox and did wonderful things for me; Made 3 different form elements visible (vs. show/hide) based on checkbox checked or not checked. Simple, I guess. Then again, I base "simple" on how symmetrical the code looks and if it's less that 10 lines. Other than that, I'm lost. However, I've officially given up on messing around with IE's checkbox border issue and X-browser alignment yippeedoodles. I want pixel perfect the hard way. But I lost that battle. But rather than get into any discussion about that, I need to accomplish the same thing using a form select box as I was able to do with the checkboxes (below):
<form id="form">
<input id="checkbox" name="checkbox" type="checkbox" onclick="showhideid" />
</form>
#IdOne, #IdTwo, #IdThree (visibility:hidden;}
function showhideid()
{
if (document.form.checkbox.checked)
{
document.getElementById("IdOne").style.visibility = "visible";
document.getElementById("IdTwo").style.visibility = "visible";
document.getElementById("IdThree").style.visibility = "visible";
document.getElementById("IdFour").setAttribute("class", "required");
}
else
{
document.getElementById("IdOne").style.visibility = "hidden";
document.getElementById("IdTwo").style.visibility = "hidden";
document.getElementById("IdThree").style.visibility = "hidden";
document.getElementById("IdFour").setAttribute("class", "");
}
}
Now, if I can accomplish the same thing using a select box (below), I will die a happy man.
This is as far as I've gotten. I'm super dizzy from reading Jquery/CSS man pages and I just can't put it all together.
<html>
<form id="form">
<select name="SelectBox">
<option>Make a Choice</option>
<option value="Value1">Selection1</option>
<option value="Value2">Selection2</option>
<option value="Value3">Selection3</option>
</select>
<label id="IdOne" for="input1">MeAndMyInputAreInvisibleByDesign</label>
<input id="IdTwo" name="input1" type="text">
<span id="IdThree">Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="I have none, but I will soon. I hope" />
</form>
</html>

take a look at the select tag:
<select name="SelectBox">
<option>Make a Choice</option>
<option value="IdTwo">Selection1</option> <!-- the value should be the id of the input field -->
<option value="IdThree">Selection2</option>
<option value="IdFour">Selection3</option>
</select>
Now you must give a selector class to each element you want to show/hide:
<input id="IdTwo" name="input1" type="text" class="toggle">
<span id="IdThree" class="toggle">
Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="toggle" />
Now look at the javascript:
jQuery(document).ready(function(){
jQuery('input[name="SelectBox"]').change(function(){
jQuery('.toggle').css({"visibility":"hidden"});//Hide all
jQuery("#" + jQuery(this).val()).css({"visibility":"visible"});
});
});

You can do something like this:
<html>
<form id="form">
<input type="text" id="IdOne" class="toggle" />
<input type="text" id="IdTwo" class="toggle" />
<input type="text" id="IdThree" class="toggle" />
<select name="SelectBox" id="selectBox">
<option value="0">Make a Choice</option>
<option value="IdOne">First element</option>
<option value="IdTwo">Second element</option>
<option value="IdThree">Third element</option>
</select>
</html>
this in javascript:
jQuery(document).ready(function(){
jQuery("#selectBox").change(function(){
jQuery(".toggle").hide();
jQuery("#" + jQuery(this).val()).show();
});
});