My requirement is like, If i am choosing single factor i can able to choose only one type of authentication mode. If any one of the authentication mode is chosen the corresponding div will be showed, In multiple factor I can able to select two authentication mode but if I am selecting two authentication modes only the first checked div get's displayed but the second checked div doesn't get's displayed. How to display both the div's when selecting 2 options.
I tried this:
if ($('#chkOTP').is(':checked')) {
$('#OTPMain').show();
} else if ($('#chkVoicePrint').is(':checked')) {
$('#VoicePrintEmailCampMain').show();
} else if ($('#chkPersonInfo').is(':checked')) {
$('#RandomAuthMain').show();
} else if ($('#chkPastHis').is(':checked')) {
$('#PastHistoryMain').show();
} else if ($('#chkSQ').is(':checked')) {
$('#SqQuestionMain').show();
}
Thanks in Advance.
Use this .. If you use else if only one statement is executed so you should go for if for each and every checkbox
if ($('#chkOTP').is(':checked')) {
$('#OTPMain').show();
}
if ($('#chkVoicePrint').is(':checked')) {
$('#VoicePrintEmailCampMain').show();
}
if ($('#chkPersonInfo').is(':checked')) {
$('#RandomAuthMain').show();
}
if ($('#chkPastHis').is(':checked')) {
$('#PastHistoryMain').show();
}
if ($('#chkSQ').is(':checked')) {
$('#SqQuestionMain').show();
}
Using a little bit of forethought can save you a fair bit of code. putting a class on your divs that matches the value of the checkbox you can just do an on click in jQuery like this:
<input type="checkbox" name="vehicle" value="first">First<br />
<input type="checkbox" name="vehicle" value="second">Second<br />
<input type="checkbox" name="vehicle" value="third">Third<br />
<input type="checkbox" name="vehicle" value="fourth">Fourth<br />
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">fourth</div>
$('input:checkbox').on('click',function(){
if($(this).is(':checked'))
{
$('.'+$(this).val()).show();
} else {
$('.'+$(this).val()).hide();
}
});
Demo: http://jsfiddle.net/calder12/jRZBX/1/
Related
I'm trying to enable/disable a place order button based on whether or not the terms acceptance checkbox has been checked. The script I have been working on works fine for that, but it's also triggered when a different checkbox (with a different id) is checked. Although the other checkbox enables the button, it doesn't disable it again when un-checking it. So I think it's something wrong with the 'on change' part.
I've tried everything I could find and can't make it work only when the checkbox with id 'terms' is checked:
<script>
jQuery(window).on('load',function(){
setTimeout(function(){
jQuery('#payment #place_order').attr("disabled","disabled");
},1000);
});
jQuery(document).on('change','#terms',function() {
var ischecked = document.getElementById("terms");
if(ischecked.checked == false){
jQuery('#payment #place_order').attr("disabled","disabled");
}else{
jQuery('#payment #place_order').removeAttr("disabled");
}
});
</script>
The terms checkbox is as below:
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox ios-switch" name="terms" id="terms">
And the other one that triggers it is as below:
<input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
Your code is not clear.
Assuming the place order has the id of #place_order, there is no need to add the container
jQuery(function() { // on page load
jQuery('#place_order').attr("disabled", "disabled");
jQuery(document).on("change", "#terms", function() { // assuming the terms is dynamically inserted
if (!this.checked) {
jQuery('#place_order').attr("disabled", "disabled");
} else {
jQuery('#place_order').removeAttr("disabled");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Terms <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox ios-switch" name="terms" id="terms"><br/>
<button id="place_order">Place order</button>
<hr/>
Create account <input class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
So far I manage to show/hide button when checkbox is checked but its checking all checkbox which I don't want.
my goal is to check different checkboxes without ticking all of them at the same time.
Edit: also to count how many elements have been checked.
http://jsfiddle.net/bLd0gaxy/1/
<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>
<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare 2</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>
$('.compare').click(function() {
if($('.compare').is(':checked')){
$('.compare-label').hide();
$('.compare-btn').show();
} else{
$('.compare-label').show();
$('.compare-btn').hide();
}
});
You have to use .prop("checked") to get the checked state (http://api.jquery.com/prop/). Here is your working example: http://jsfiddle.net/infous/bLd0gaxy/3/
You need to use this to work with the closest elements:
$('.compare').change(function() {
if (this.checked) {
$(this).next("label").hide();
$(this).nextUntil("button").show();
} else {
$(this).next("label").show();
$(this).nextUntil("button").hide();
}
var totalChecked = $(".compare:checked").length;
});
Also, work with the change event of the checkbox.
I have a reason to use checkboxes instead of radio buttons so please don't suggest I use radio buttons but need to duplicate the functionality. However when I select the Yes checkbox, it disables the No checkbox for some reason. When no is selected I want to hide the div and deselect Yes, and the opposite when I select Yes I want to show the div and uncheck NO. The only way I can select NO when Yes is checked is to uncheck it.
Working demo Here
JS Fiddle not working Here
Javascript
function injure() {
if (document.getElementById("f2").checked == true) {
document.getElementById("LocFall").style.display="block";
document.getElementById("f1").checked = false;
} else {
if (document.getElementById("f1").checked == true) {
document.getElementById("LocFall").style.display="none";
document.getElementById("f2").checked = false;
}
}
}
CSS
#LocFall {
display:none;
}
HTML
<input type="checkbox" id="f1" name="" onclick="injure();">
<label for="f1"> No </label><BR>
<input type="checkbox" id="f2" name="" onclick="injure();">
<label for="f2"> Yes</label><BR>
<div id="LocFall">
Show some stuff
</div>
http://jsfiddle.net/6NN6s/14/
<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>
function injure(cmb) {
if (cmb.checked) {
if(cmb.id==="f2")
{ document.getElementById("LocFall").style.display = "block";
document.getElementById("f1").checked = false;
}
else
{
document.getElementById("LocFall").style.display = "none";
document.getElementById("f2").checked = false;
}
}
}
try this out, may be what you need.
In Fiddle change on the left in second drop-down list 'onLoad' to 'no wrap - in <head>'.
Split injure into a different function for each; if you choose No, then you cannot choose Yes because of the way your function is set up - the first condition will always evaluate as true.
The problem stems from not knowing which checkbox was actually clicked inside the function. As it is there's only two different ways the function can respond: one if f1 is checked and one if f2 is checked. The problem is there's actually more possible states that you're trying to represent.
State 1: Nothing checked, user clicks f1 or f2
State 2: f1 checked, f2 clicked
State 3: f2 checked, f1 clicked
Your code handles the first state fine but it can't deal properly with the second ones. If you split your code into two seperate functions to handle each box then you'll have all the necessary information to write correct decision logic.
There's also the states of clicking the same box, but they are simple and your code handles them already.
I have seen other examples of this but have not successfully gotten this to function correctly. The examples I have seen also are just using regular checkboxes. I have used a class to stylize the checkbox with a sprite sheet so having a bit of trouble taking the ideas of these other examples and applying them to my case.
Here is the mark up:
<div id="showHideAll"">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" class="pinToggles" onclick="checkAllLinks()">
<label for="allCheck" class="css-label"></label></div>
</div>
<div>Opt1<input type="checkbox" id="opt1Check" name="pinSet" class="pinToggles" onclick="checkOpt1Links()">
<label for="opt1Check" class="css-label"></label>
</div>
<div>Opt2<input type="checkbox" id="opt2Check" name="pinSet" class="pinToggles" onclick="checkOpt2Links()">
<label for="opt2Check" class="css-label"></label>
</div>
<div>Opt3<input type="checkbox" id="opt3Check" name="pinSet" class="pinToggles" onclick="checkOpt3Links()">
<label for="dinShopCheck" class="css-label"></label>
</div>
The checked property is what changes the sprite using a css class.
input[type=checkbox].pinToggles:checked + label.css-label {
background-position: 0 -16px;
}
Most of this is for other functionality but thought I would show it just in case.
This is how I set up the individual checkboxes:
function checkOpt1Links(){
$('#opt1 li a').toggleClass("inactive");
if(opt1.getVisible() == true)
{
opt1.setOptions({visible:false});
}
else
{
opt1.setOptions({visible:true});
}
}
What I am looking for is the typical select all checkbox functionality, where if you check it the boxes all check, if you uncheck they all uncheck but also if you click a box when select all is checked the select all and the clicked checkbox uncheck and vice versa. I did look at this example: Jquery "select all" checkbox but just having difficult time making it work. Thanks for the help!
1) Use change event handler instead of click for checkbox and radio buttons.
You can make it simple like this
$('#showHideAll').on('change', 'input[type=checkbox]', function () {
if ($('.pinToggles').is(':checked')) {
$('.pinToggles').prop('checked', false)
}
else {
$('.pinToggles').prop('checked', true)
}
});
2) I have removed the class and onclick event handler in the below checkbox only.
HTML:
<div id="showHideAll">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" >
<label for="allCheck" class="css-label"></label></div>
</div>
Check this JSFiddle
I'm coding a form which gets the value for some search process .. I'm coding two text fields for the user to give the input on any one of them.But only one of them would enable at a time .. user can chose the option by checking check box. by default one of the field should b enable, when the check-box is checked it(the one which was initially enable) gets disabled and other gets enabled, and vice versa when the check-box is unchecked.
Here is the fiddle:
http://jsfiddle.net/awBvq/224/
This will fix your problem
HTML :
<input type="text" name="" />
<input type="checkbox" name="" />
<input type="text" name="" disabled="'disabled'"/>
JS :
$(':checkbox').change(function(){
if ($(this).is(':checked')) {
$(this).prev().attr('disabled','disabled');
$(this).next().removeAttr('disabled');
} else {
$(this).next().attr('disabled','disabled');
$(this).prev().removeAttr('disabled');
}
});
It could have been done simpler, but this is just a hint:
if($("#CheckBox").is(":checked"))
{
$("#Field1").attr("disabled","disabled");
$("#Field2").removeAttr("disabled");
}
else
{
$("#Field1").removeAttr("disabled");
$("#Field2").attr("disabled","disabled");
}
Simple logic:
(1) By default disable any one of the textbox.
(2) Using .prev() or .next(), check whether anyone is disabled.
(3) if so, enable it and disable the other else vice versa.
HTML:
<input type="text" name="" disabled/> <!--By default it is disabled-->
<input type="checkbox" name="" />
<input type="text" name="" />
Javascript:
$(':checkbox').change(function () {
if ($(this).prev().is(':disabled')) {
$(this).prev().removeAttr('disabled');
$(this).next().attr('disabled', 'disabled');
} else {
$(this).next().removeAttr('disabled');
$(this).prev().attr('disabled', 'disabled');
}
});
Check this JSFiddle