how can I add the class "disabled" to the second checkbox if the first one is selected and vice versa.
I don't know where I'm wrong, this is my code, in which I imagined two functions to include where I will turn off the secondary checkbox in each. (maybe it can in one function for sure, but I don't know), this is my example, if someone can correct me where I went wrong, thank you.
function disableNewmobileOption(ev) {
ev.preventDefault();
var inputElementLabel = $(ev.currentTarget);
var inputElement = inputElementLabel.siblings("input");
if (inputElement.is(':checked')) {
if (inputElement.attr("id") === "b_mobnr") {
$(".newmobile .circle-buttons").addClass("disabled");
} else {
$(".b_mobnr .circle-buttons").removeClass("disabled");
}
}
}
function disableBMobOption(ev) {
ev.preventDefault();
var inputElementLabel = $(ev.currentTarget);
var inputElement = inputElementLabel.siblings("input");
if (inputElement.attr("id") === "newmobile") {
$(".b_mobnr .circle-buttons").addClass("disabled");
} else {
$(".newmobile .circle-buttons").removeClass("disabled");
}
}
<div class="row">
<div class="col-sm-4 newmobile">
<h4>Optionen</h4>
<span class="circle-buttons">
<input type="checkbox" name="b_mobnr" id="b_mobnr" value="0">
<label for="b_mobnr" onclick="disableNewmobileOption(event)">Mobile Option</label>
<div class="check square-check"></div>
</span>
</div>
<div class="col-sm-12 b_mobnr">
<span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile" value="0">
<label for="newmobile" onclick="disableBMobOption(event)">Newmobile Option </label>
<div class="check square-check"></div>
</span>
</div>
</div>
You can use .not() to add disabled class to other span tag when your checkbox is checked.Other way would be passing this inside your function call then depending on if the checkbox is checked add class to other span.
Demo Code :
/*$(".circle-buttons input[type=checkbox]").on("change", function() {
$(".circle-buttons").removeClass("disabled") //remove from all
if ($(this).is(":checked")) {
$(".circle-buttons").not($(this).closest(".circle-buttons")).addClass("disabled") //other span tag
}
})*/
function disableNewmobileOption(el) {
var inputElement = $(el);
//remove class from all
$(".circle-buttons").removeClass("disabled");
//check if checkbox is checked
if (inputElement.is(':checked')) {
//add class to other
$(".b_mobnr .circle-buttons").addClass("disabled");
}
}
function disableBMobOption(el) {
var inputElement = $(el);
$(".circle-buttons").removeClass("disabled");
if (inputElement.is(':checked')) {
$(".newmobile .circle-buttons").addClass("disabled");
}
}
.disabled {
color: grey;
pointer-events: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 newmobile">
<h4>Optionen</h4>
<span class="circle-buttons">
<!--aded click event on checkbox-->
<input type="checkbox" name="b_mobnr" id="b_mobnr" onclick="disableNewmobileOption(this)" value="0">
<label for="b_mobnr" >Mobile Option</label>
<div class="check square-check"></div>
</span>
</div>
<div class="col-sm-12 b_mobnr">
<span class="circle-buttons">
<input type="checkbox" name="newmobile" id="newmobile" onclick="disableBMobOption(this)" value="0">
<label for="newmobile">Newmobile Option </label>
<div class="check square-check"></div>
</span>
</div>
</div>
Related
I'm trying to calculate the %share which is simply an addition of share1+share2 == 100. However, I want it to work only on the two checked checkboxes.
How do I go about detecting the selected checkbox and apply the function accordingly?
var MAX = 2;
$('input.addnominee').click(function() {
($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
});
$("#share1").focusout(function() {
var share1 = $("#share1").val();
var answer = 100 - share1;
$("#share2").val(answer);
});
$("#share2").focusout(function() {
var share2 = $("#share2").val();
var answer = 100 - share2;
$("#share1").val(answer);
});
label {
display: block;
}
.block {
background-color: #eee;
padding: 15px;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h6>You can choose a maximum of 2 users</h6>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share1" class="form-control" placeholder="% share" required>
</div>
</div>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share2" class="form-control" placeholder="% share" required>
</div>
</div>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share3" class="form-control" placeholder="% share" required>
</div>
</div>
<div class="block">
<label class="checkbox"> Add User
<input class="addnominee" type="checkbox" data-toggle="collapse" data-target="#fnominee">
</label>
<div class="form-group">
<input type="number" pattern="[0-9]*" id="share4" class="form-control" placeholder="% share" required>
</div>
</div>
Do you have a specific reason to use focusout?
You could catch the ID's of the two "selected" elements inside your checkbox function. Or to be precise, get id of input that is in the next div inside the clicked checkbox's parent:
var active1, active2;
var MAX = 2;
$('input.addnominee').click(function() {
($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
let checked = $('input.addnominee:checked');
active1 = $(checked[0]).parent().next('div').children('input').attr('id');
//Let's assign active2 only if we have multiple selected checkboxes:
if(checked.length > 1) active2 = $(checked[1]).parent().next('div').children('input').attr('id');
});
Here's example with click. To simplify it a bit, I added stepper class into every number input, and we're now detecting click for the class stepper:
$(document).on('click','.stepper',function(){
if($(this).attr('id') == active1){ //Check which one user clicked
if(active2 != undefined){ //Make the math only if we have another active element
var share1 = $('#'+active1).val();
var answer = 100 - share1;
$('#'+active2).val(answer);
}
}else if($(this).attr('id') == active2){
if(active1 != undefined){
var share2 = $('#'+active2).val();
var answer = 100 - share2;
$('#'+active1).val(answer);
}
}
});
Fiddle: https://jsfiddle.net/xpvt214o/677733/
This surely works also with focusout, but you need to remember that clicking stepper wont focus the input, so it wouldn't be very functional.
And with this same idea you could also disable the inputs which are not 'active'.
I hope this helps!
EDIT:
Maybe a bit simplified version with the same idea:
jQuery(document).ready(function($) {
var MAX = 2;
$('input.addnominee').click(function() {
($('input.addnominee:checked').length == MAX) ? $('input.addnominee').not(':checked').attr('disabled',true):$('input.addnominee').not(':checked').attr('disabled',false);
});
$(document).on('click','.stepper',function(){
var checked = $('input.addnominee:checked');
if(checked.length > 1){
var active1 = $(checked[0]).parent().next('div').children('input');
var active2 = $(checked[1]).parent().next('div').children('input');
var share = $(this).val();
var answer = 100 - share;
if($(this).attr('id') == $(active1).attr('id')){
$(active2).val(answer);
}else if($(this).attr('id') == $(active2).attr('id')){
$(active1).val(answer);
}
}
});
});
Fiddle: https://jsfiddle.net/128uzmj3/
I'm trying to do detection onLoad to see if a radio button is checked. If it is then I want to output some text into a div. Currently it isn't working onLoad and the functionality only works on click.
I'm using local storage to remember if a user has selected certain fields on refresh and this works fine - so whatever radio button was selected before a refresh shows after.
This is the code to change the text onLoad:
$(document).ready(function() {
var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();
if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
}
See full code:
// Circuit Select
// Toggle Metre Question and fill out summary
$('input[name="options[numberCircuitsMetre]"]').click(function(){
if($(this).attr("value")=="As many as possible per metre"){
$(".toggleQuestion").hide();
$('#circuit').text('As many as possible per metre');
}
if($(this).attr("value")=="Custom number"){
$(".toggleQuestion").show();
}
});
var circuitNum = $('input[name="options[numberCircuitsMetre]"]:checked').val();
if (circuitNum == 'As many as possible per metre') {
$('#circuit').text('As many as possible per metre');
}
if (circuitNum == 'Custom number') {
if($('.circuitsNum').val() == ''){
$('.circuitsValidation').html("<span class='flash'>Please add the number of circuits you want per metre</span>");
$('.circuitsNum').addClass("errorBorder");
var errorMessage = 'true';
} else {
$('#circuit').text('#circuitsNum'.value || '');
}
$(".toggleQuestion").show();
}
$("#circuitsNum").on('change keydown paste input', function() {
$('#circuit').text(this.value || '');
}).change();
$('#no').click(function() {
var term = $('#circuitsNum').val();
$('#circuit').text(term || '');
});
.radio-toggle {
margin-bottom: 30px;
}
.toggleQuestion {
display: none;
padding-top: 20px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!-- No. of Circuit Designs -->
<fieldset>
<label>Do you want as many circuit designs per metre as possible?</label>
<div class="radio-toggle">
<div class="row collapse radio-shack">
<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="yes" class="substrate" value="As many as possible per metre" checked="checked" />
<div class="check-cover">
</div>
<div class="check"></div>
<label for="yes">
<div class="label-head"><strong>Yes</strong></div>
</label>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="radio-margin">
<div class="radio-zone">
<input type="radio" name="options[numberCircuitsMetre]" id="no" class="substrate" value="Custom number"/>
<div class="check-cover">
</div>
<div class="check"></div>
<label for="no">
<div class="label-head"><strong>No</strong></div>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="toggleQuestion">
<label>How many circuit designs per metre would you like?</label>
<input type="number" name="options[numberCircuits]" step="any" placeholder="Add the number of circuits per metre..." class="circuitsNum number" id="circuitsNum">
<p class="circuitsValidation"></p>
</div>
</fieldset>
<div class="summary-row">
<div class="summary-cell summary-head">
<strong>No. of circuits:</strong>
</div>
<div class="summary-cell">
<span id="circuit"></span>
</div>
</div>
try this https://jsfiddle.net/0zzdkb32/44/ I just add this code
$(document).ready(function() {
$('input[name="options[numberCircuitsMetre]"]').each(function() {
if ($(this).val() == localStorage.getItem('selected')) {
$(this).click();
if($(this).val()=="As many as possible per metre"){
$(".toggleQuestion").hide();
setTimeout(function(){
$('#circuit').text('As many as possible per metre');
}, 100);
}
if($(this).attr("value")=="Custom number"){
$(".toggleQuestion").show();
}
}
});
})
and add
localStorage.setItem('selected', $(this).val());
in your click event
I have the following snippet:
YUI().use('event', function (Y) {
var button = Y.one("#ckbox");
button.ancestor(".control-group").next(".control-group").setStyle("display", "none");
button.on("change", function (e) {
var checkbox = e.target;
if(checkbox.get('checked')) {
alert("it is checked");
checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "block");
} else {
checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "none");
}
});
});
<script src="http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js"></script>
<div class="control-group form-inline">
<label class="checkbox" for="ckbox">
<input id="ckbox-hiden" name="ckbox-hiden" type="hidden" value="true" />
<input class="field checkbox-checked" id="ckbox" name="ckbox" type="checkbox" value="true" />
Show div
</label>
</div>
<div class="control-group">
<p>HIDE THIS</p>
</div>
jsFiddle
I want to hide a div and when the checkbox is checked I want to show the div.
I get this error:
TypeError: button.ancestor(...).next(...).setStyle is not a function
You need to add the node module to take advantage of methods which manipulate nodes:
YUI().use('event', 'node' function (Y) { // ...
YUI().use('event', 'node', function (Y) {
var button = Y.one("#ckbox");
button.ancestor(".control-group").next(".control-group").setStyle("display", "none");
button.on("change", function (e) {
var checkbox = e.target;
if(checkbox.get('checked')) {
alert("it is checked");
checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "block");
} else {
checkbox.ancestor(".control-group").next(".control-group").setStyle("display", "none");
}
});
});
<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<div class="control-group form-inline">
<label class="checkbox" for="ckbox">
<input id="ckbox-hiden" name="ckbox-hiden" type="hidden" value="true" />
<input class="field checkbox-checked" id="ckbox" name="ckbox" type="checkbox" value="true" />
Show div
</label>
</div>
<div class="control-group">
<p>HIDE THIS</p>
</div>
I am trying to get all the values of the input fields. The issue is all of the <input type=radio/> are dynamic and can increase or decrease at any time.
So I am starting with the main DI and going from there. The problem I have now is I am not getting the input radio buttons values.
So here are the steps I am intending to accomplish:
If any radio button is selected, pass its value to the checkbox value,
If the radio button is selected and the checkbox is not selected, do not pass to the checkbox value
I am looking for a solution in JavaScript only - do not use jQuery
Here is my jsFiddle code
HTML
<div style="display: block;" id="mymainDiv" class="fullFloat">
<input type="hidden" value="1" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
<div class="subTitle">UPS<a class="fRight" onclick="localG('10',false,0,false,'UPS','1','$');" href="javascript:void(0);">Show Prices</a></div>
<div style="display:none;" id="Wheel_UPS"><div class="loadingcheckout"></div></div>
<div id="Price_UPS">
</div>
<div class="wrapLeft wrapClear">
<div class="wrapleft">
<label class="">
<input type="radio" value="11098" id="deliveryMethodId_1" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier="">
<span>
UPS Ground (Order by 9:30 PM EST)
</span>
<div class="wrapRight">
<div id="UPS_11098">
</div>
</div>
</label>
</div>
<input type="text" value="1" id="UPS">
</div>
<input type="hidden" value="2" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
<div class="subTitle">Standard<a class="fRight" onclick="localG('20',false,0,false,'Standard','2','$');" href="javascript:void(0);">Show Prices</a></div>
<div style="display:none;" id="Wheel_Standard"><div class="loadingcheckout"></div></div>
<div id="Price_Standard">
</div>
<div class="wrapLeft wrapClear">
<div class="wrapleft">
<label class="">
<input type="radio" value="11117" id="deliveryMethodId_2" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier="">
<span>
Standard Delivery - 2-3 Day Delivery at Ground Rate (Order by 9:30 PM EST)
</span>
<div class="wrapRight">
<div id="Standard_11117">
</div>
</div>
</label>
</div>
<input type="text" value="1" id="Standard">
</div>
<input type="hidden" value="3" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
<div class="subTitle">FedEx<a class="fRight" onclick="localG('190',false,0,false,'FedEx','3','$');" href="javascript:void(0);">Show Prices</a></div>
<div style="display:none;" id="Wheel_FedEx"><div class="loadingcheckout"></div></div>
<div id="Price_FedEx">
</div>
<div class="wrapLeft wrapClear">
<div class="wrapleft">
<label class="">
<input type="radio" value="11088" id="deliveryMethodId_3" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier="">
<span>
FedEx Ground (Order by 8:00 PM EST)
</span>
<div class="wrapRight">
<div id="FedEx_11088">
</div>
</div>
</label>
</div>
<input type="text" value="1" id="FedEx">
</div>
</div>
<input type="checkbox" name="shipmode" id="shipmode" value="" onclick="getpref('mymainDiv');">Get Value
JS Code
This executes when the checkbox is clicked:
function getpref(val) {
var wr = document.getElementById(val);
childElements = wr.childNodes;
//alert(childElements);
for(var i = childElements.length-1; i>=0; i--){
var elem = childElements[i];
console.log(elem.id);
if(elem.id && elem.id.indexOf(val+'_')==0){
elem.style.display = 'block';
}
}
//alert(val);
}
You can directly access input nodes in your DIV with getElementsByTagName
function getpref(val) {
var divNode = document.getElementById(val);
var inputNodes = divNode.getElementsByTagName('INPUT');
for(var i = 0; i < inputNodes.length; ++i){
var inputNode = inputNodes[i];
if(inputNode.type == 'radio') {
//Do whatever you want
if(inputNode.checked) {
//Do whatever you want
}
}
}
}
Example: http://jsfiddle.net/88vp0jLw/1/
You can use getElementsByName to get you all of the radio buttons by name='deliveryMethodId' and then go from there:
function getpref(val) {
var radioButtons = document.getElementById(val).getElementsByName("deliveryMethodId");
for(var i = radioButtons.length-1; i>=0; i--)
{
var radioButton = radioButtons[i];
if(radioButton.checked)
console.log(radioButton.id + " is selected ");
}
}
I have a button Resend , and on click of it , the checkboxes get enable against the following:
id="AlertSent"
id="AlertNotSent"
id="AlertInProgress"
Now the DIV Code for Above mentioned DIVS is as below
<div class="span9">
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
</div>
<div id="AlertSent" class="span12">
<label><spring:message code='alert.sent' />:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox2" name="checkbox2"/>
</div>
<div id="AlertNotSent" class="span12">
<label><spring:message code='alert.not.sent'/>:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
</div>
<div id="AlertInProgress" class="span12">
<label> <spring:message code='alert.in.progress' />:</label>
</div>
</div>
</div>
The button Code for Resend and Done is
<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>
The JQuery Code is
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var resendbtn = j$('#resend');
var allChkBox = j$('input[name="enableCheckBox"]');
var verifyChecked = function() {
if ! $('#resend').click {
allChkBox.attr('disabled', 'disabled');
} else {
allChkBox.removeAttr('disabled');
}
};
verifyChecked();
resendbtn.change(verifyChecked);
});
The requirement is on click of Resend, the checkboxes appear against above DIVS (AlertSent, AlertNotSent and AlertInProgress), and the Resend button Becomes Done, and if a User unchecks all the checkboxes then the Done Button becomes Resend again.
How do I write a JQuery/JavaScript code to achieve above?
Please suggest
It's hard to know exactly what you want here, but perhaps this will get you started:
http://jsfiddle.net/ZqH7B/
to handle showing the checkboxes:
$("#resend").on( 'click', function () {
$('.enableCheckBox').css('visibility', 'inherit');
$(this).hide().next().show();
$('input:checkbox').prop('checked', true);
});
to handle uncheck behavior:
$('input[type=checkbox]').on( 'change', function() {
var num = $('input:checked').length;
if ( num == 0 ) { $('#resend').show().next().hide(); }
});
Try following code:
HTML:
<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">
JS:
$(document).ready(function(){
$(".chk").prop("checked","checked");
$(".chk").css('display','none');
$(".toggle").click(function(){
$(".chk").css('display','block');
$(".chk").prop("checked","checked");
$(this).val("Done");
});
$(".chk").change(function(){
var all = $(".chk").length;
var chked = $(".chk").not(":checked").length;
if(all == chked){
$(".chk").css('display','none');
$(".toggle").val("Resend");
}
})
});
JSFIDDLE DEMO