We Keep Coding

Issue with script being triggered by wrong checkbox

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">

jquery mobile set selected value of a radio button group

I have a radio button group like this:
<div data-role="fieldcontainer">
<fieldset data-role="controlgroup" data-type="horizontal" name="optRestriction" id="optRestriction">
<legend>Restriction</legend>
<input type="radio" name="chkRestriction" id="chkRed" value="R" class="custom" />
<label for="chkRed">Red</label>
<input type="radio" name="chkRestriction" id="chkYello" value="Y" class="custom" />
<label for="chkYello">Yellow</label>
<input type="radio" name="chkRestriction" id="chkGreen" value="G" class="custom" />
<label for="chkGreen">
I am trying to set the selected value after retrieving values from the serve API.
I have tried various ways like below:
$("input[name=chkRestriction][value=" + data.rows[0].restrictionCd + "]").prop('checked', true).trigger('change');
$("input[type='radio']:eq(" + data.rows[0].restrictionCd + ")").attr("checked", "checked");
$("input[type='radio']").checkboxradio("refresh");
$("input[name=chkRestriction][value=" + data.rows[0].restrictionCd + "]").prop('checked', true).trigger('change');
$('[name="chkRestriction"]').val([ data.rows[0].restrictionCd ]);
But none seem to work. A demo fiddle is here
Appreciate any suggestions in advance.

Set attribute "checked" and call refresh.
$('input:radio[name="chkRestriction"]').filter('[value="R"]').attr("checked",true).checkboxradio("refresh");
Jsfiddle - https://jsfiddle.net/of7uvbwh/3/

Set/unset the value of each radio button in a loop like this this:
var valToSet = myVal; // myVal is value to set from API
$('#optRestiction input').each(function(){
var $this = $(this)
if($this.val() == valToSet) {
$this.prop('checked', true);
}
else {
$this.prop('checked', false);
}
});
The 'changed' event fires when one of your inputs changes state. Triggering it will accomplish nothing unless you have defined a handler for the 'changed' event for that input.

Try this.
$('input:radio[name="chkRestriction"]').filter('[value="R"]').attr("checked",true).checkboxradio().checkboxradio("refresh");

How to hide radio button until something happens?

So I want to hide a radio button until my form is filled out but I don't know how. I tried .hide(); and that worked when I put it outside of my .submit function but doesn't work inside of it. This is using jquery and bootstrap.
Here is a small version of the JS I have ('agree' is the radio button):
$('myForm').submit(function(e){
var firstName = $('first-name').val();
var pattern = /^$/;
var error = '';
var checkbox = document.getElementById('agree');
if(pattern.test(firstName)){
error += 'Error: enter first name.\n';
}
if(error.length != 0){
alert(error);
e.preventDefault();
}
});
I want to hide the radio button until the first name part of the form is filled out then the radio button will appear.

Put an id in your radio like this :
<input type="radio" id="rad" />
Then hide it like this using jquery :
$('#rad').hide();
Then an example of how you can make it show when something happens would go a bit like this :
If ($('#something') > 10) {
$('#rad').show();
}
Hope this helped :)

I would use plain JavaScript for this:
<input type="text" name="first-name" value="" onchange="document.getElementById('agree').style.display = (this.value == '' ? 'block' : 'none' );"/>
<input type="checkbox" name="agree" value="Agree" style="display:none"/>
Edit:
Other ways to do this is to use onkeydown, onkeyup or onblur instead of onchange

Here is a simple example using jquery... http://jsfiddle.net/wa8rxj43/2/
HTML
<input type="text" id="name" class="name">
<input class="not-display" id="somecheck" type="checkbox" name="vehicle" value="Car" checked>
JavaScript
$('#somecheck').hide();
$("#name").bind({
'input':function(){
if(this.value.length > 0)
{
$('#somecheck').show();
}
else
{
$('#somecheck').hide();
}
}
});
Edit: Removed CSS per OP's request.

If checkbox checked then trick button to continue to next page

How would I do this is Javascript? I'm trying to figure out a way in Javascript to trigger that submit button below if checkbox is checked. Which is it.
<input type="checkbox" name="product[6]" value="1" checked="checked">
<input type="submit" value="Continue">
Thank for you any help!
Tim

UPDATED
You can handle submit() event and add condition like bellow :
JS :
$("#target").submit(function( event ) {
event.preventDefault(); //prevent submit action here
//Condition on checkbox
if($( "input[name='product[6]']:checked" )){
$('#submit-btn').click(); //handle submit if condition true
}
});

For simplicity and specificity of which checkbox am adding ID's to elements
<input id="product6" type="checkbox" name="product[6]" value="1" checked="checked">
<input id="submit-btn" type="submit" value="Continue">
jQuery:
$(function(){
if( $('#product6').is(':checked') ){
$('#submit-btn').click();
// or submit the form
$('#product6').closest('form').submit();
}
});

First you want to give the checkbox input an id (checkbox-id for example)
and for the submit input (submit-id for example)
document.getElementById("checkbox-id").onclick = myFunction;
function myFunction()
{
document.getElementById("submit-id").click();
//Or
document.getElementById("submit-id").submit();
}

CheckAll/UncheckAll checkbox with jQuery

I have made a check-box checkall/uncheckall.
HTML
<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>
main.js
function checkAll(parentId,allClass,checkboxClass,allChecked){
checkboxAll = $('#'+parentId+' .'+allClass);
otherCheckBox = $('#'+parentId+' .'+checkboxClass);
checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
if(allChecked=='false'){
if(otherCheckBox.size()==checkedCheckBox.size()){
checkboxAll.attr('checked',true);
}else{
checkboxAll.attr('checked',false);
}
}else{
if(checkboxAll.attr('checked')){
otherCheckBox.attr('checked',true);
}else{
otherCheckBox.attr('checked',false);
}
}
}
It works fine. But get bulky when I have whole lot of checkboxes. I want to do same work by using jQuery rather than putting onchange on each checkbox. I tried different sort of things but couldnot work. I tried following one:
$('.check input[type="checkbox"]').change(function(e){
checkAll('selectCheckBox','all','check','true');
});
to do same work as onchange event but didnot work. Where do I went wrong.

I think you just need this: You do not need to pass all the arguments and have the inline onchange event attached to it. You can simplify your code.
$(function () {
$('input[type="checkbox"]').change(function (e) {
if(this.className == 'all')
{
$('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
}
else
{
$('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
}
});
});
Demo

Your selector is wrong:
.check input[type="checkbox"]
Above selects any input of type checkbox that has the ancestor with class .check. It'll match this:
<div class="check">
<input type="checkbox".../>
</div>
it should be:
input.check[type="checkbox"]

You closed the string here $('.check input[type='checkbox']') instead, you should use double quotes $('.check input[type="checkbox"]')