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

Two checkboxes acting as one

I have two checkboxes on a page and I want them to act as only one. For example, I select one, and the other is selected automatically, and vice-versa.
I've managed to select both of them at once, but I can't seem to figure out a way to deselect them at once.
And what's bothering me the most, is that it's probably a super simple line of code that I'm simply not remembering.
Is there a way to do this?

Is this what you're looking for?
$(".test").change(function () {
$(".test").attr("checked", this.checked);
});
<input type='checkbox' class='test'>A<br />
<input type='checkbox' class='test'>B<br />

Here is a solution in pure javascript:
// Select all checkboxes using `.checkbox` class
var checkboxes = document.querySelectorAll('.checkbox');
// Loop through the checkboxes list
checkboxes.forEach(function (checkbox) {
// Then, add `change` event on each checkbox
checkbox.addEventListener('change', function(event) {
// When the change event fire,
// Loop through the checkboxes list and update the value
checkboxes.forEach(function (checkbox) {
checkbox.checked = event.target.checked;
});
});
});
<label><input type="checkbox" class="checkbox"> Item 1</label>
<br>
<label><input type="checkbox" class="checkbox"> Item 2</label>

$(document).ready(function() {
$('#check_one').change(function() {
$('#check_two').prop('checked', $('#check_one').prop('checked'));
});
$('#check_two').change(function() {
$('#check_one').prop('checked', $('#check_two').prop('checked'));
});
});
<form>
<label>Simple checkbox</label>
<input type="checkbox" id="check_one" />
<label>Complicated checkbox</label>
<input type="checkbox" id="check_two" />
</form>
Assuming you have two checkboxes named differently but working in concert, this code would work

html:
<input type="checkbox" id="1" class="handleAsOne">
<input type="checkbox" id="2" class="handleAsOne">
javascript (jquery):
$('.handleAsOne').on('change'){
$('.handleAsOne').prop('checked', false);
$(this).prop('checked', true);
}
if i understood your question correctly you are looking for something like this.

jquery syntax for .on("change","input[name^=

Project Focus
Toggle Checkbox(es)
Special Requirement
Need to bind the new(dynamically) added div.id container that holds these checkboxes. Note: this div.id has been dynamically generated (client-side).
Status
My Working Fiddle successfully toggles between 1(one) or 0(none) checkboxes.
The HTML
<div id="bind_id">
<input type="checkbox" name="iso_01[]" class="setTitlePre1" value="L/R" />
<label for name "iso_01" class="isoVar1">No.1</label>
<input type="checkbox" name="iso_01[]" class="setTitlePre2" value="Alt" />
<label for name "iso_01" class="isoVar2">No.2</label>
</div>
Working Script
var checkboxes;
checkboxes = $("input[name^=iso_01]").change(function (e) {
checkboxes.not(this).prop("checked", false);
}
});
Desired Result
I'm having trouble with syntax for updating .click() to .on("click","input..." see Bound Fiddle
Updated Script
var checkboxes;
checkboxes = $("#bind_id").on("change", "input[name^=iso_01]", function (e) {
if (this.checked) {
checkboxes.not(this).prop("checked", false);
}
});

Your issue is,
checkboxes = $("#bind_id").on
is not doing what you think it is doing. It is not storing all the matched nodes.
Try this instead:
In the callback, change
checkboxes.not(..)
to
$('input[name^=iso_01]').not(this).prop("checked", false);
Working fiddle
Or if they are loaded dynamically, you can use $('#bind_id').find('input[name^=iso_01]')

This is not what checkboxes are for. You should be using radio buttons:
<input type="radio" name="example" value="1" id="1">
<label for="1">one</label>
<input type="radio" name="example" value="2" id="2">
<label for="2">two</label>

The problem is checkboxes is the #bind_id element, not the checkboxes. You would need to find the children from that element, to get the child checkbox elements.
Working Example:
var wrapper;
wrapper = $("#bind_id").on("change", "input[name^=iso_01]", function (e) {
if (this.checked) {
wrapper.find("input[name^=iso_01]").not(this).prop("checked", false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bind_id">
<input type="checkbox" name="iso_01[]" class="setTitlePre1" value="L/R" />
<label for name "iso_01" class="isoVar1">No.1</label>
<input type="checkbox" name="iso_01[]" class="setTitlePre2" value="Alt" />
<label for name "iso_01" class="isoVar2">No.2</label>
</div>

jQuery checking checkboxes does not work

I'm trying to implement a "Select All" checkbox on an HTML form using JQuery 1.9.1. As far as I can tell, it should be as simple as using .prop to check or uncheck a checkbox, but nothing I try seems to work.
Please see below for what I have tried, I've commented out some failed attempts out and I cannot get this to work for even one checkbox. What is the correct way to do this? Am I missing something, possibly in the HTML?
HTML
<input type="checkbox" id="cb_select_all" name="cb_select_all" value="t" />
<label for="cb_select_all"><b>Select All</b>
</label>
<br />
<input type="checkbox" name="cb1" id="cb1" class="cb_all" value="t" />
<label for="cb1">1 test</label>
<br />
<input type="checkbox" name="cb2" id="cb2" class="cb_all" value="t" />
<label for="cb2">2 test</label>
Javascript
$(document).ready(function () {
$("#cb_select_all").change(cb_select_all_onchange);
}); //end $(document).ready
function cb_select_all_onchange() {
if ($("#cb_select_all").checked) {
//$("#cb1").prop("checked", true);
//$(".cb_all").each(function(){ this.checked = true; });
//document.getElementById("cb1").checked = true;
$(".cb_all").prop("checked", true);
} else {
$("#cb1").prop("checked", false);
}
}
http://jsfiddle.net/mLnb5qed/5/
Thanks,
jdt

Change your if to this
if ($("#cb_select_all")[0].checked) { }
( or ) if ($("#cb_select_all").is(":checked")) { }
The problem is the first one is a property of native element and not jQuery object. Accessing it by an index gives you the ability to use that property. The second way is the jQuery way.

Use
$("#cb_select_all").is(':checked');

This worked for me:
$(document).ready(function () {
$("#cb_select_all").change(function () {
if ($("#cb_select_all").prop("checked") == true) {
$('.cb_all').prop('checked', true);
}
else {
$('.cb_all').prop('checked', false);
}
});
});
What happens:
Check if the "cb_select_all" checkbox changes state
if the "checked" state is set to true
check all "cb_all" checkboxes
else
uncheck all "cb_all" checkboxes

jQuery click event on radio button doesn't get fired

I've got the following code to trigger a click event on some radio buttons! but it doesn't get fired! can any one help me with this!
CODE :
$("#inline_content input[name='type']").click(function(){
if($('input:radio[name=type]:checked').val() == "walk_in"){
$('#select-table > .roomNumber').attr('enabled',false);
}
});
RADIO BUTTONS
<form class="type">
<input type="radio" name="type" checked="checked" value="guest">In House</input>
<input type="radio" name="type" value="walk_in">Walk In</input>
</form>.
Update
Tried onChange() too but not working.

It fires. Check demo http://jsfiddle.net/yeyene/kbAk3/
$("#inline_content input[name='type']").click(function(){
alert('You clicked radio!');
if($('input:radio[name=type]:checked').val() == "walk_in"){
alert($('input:radio[name=type]:checked').val());
//$('#select-table > .roomNumber').attr('enabled',false);
}
});

There are a couple of things wrong in this code:
You're using <input> the wrong way. You should use a <label> if you want to make the text behind it clickable.
It's setting the enabled attribute, which does not exist. Use disabled instead.
If it would be an attribute, it's value should not be false, use disabled="disabled" or simply disabled without a value.
If checking for someone clicking on a form event that will CHANGE it's value (like check-boxes and radio-buttons), use .change() instead.
I'm not sure what your code is supposed to do. My guess is that you want to disable the input field with class roomNumber once someone selects "Walk in" (and possibly re-enable when deselected). If so, try this code:
HTML:
<form class="type">
<p>
<input type="radio" name="type" checked="checked" id="guest" value="guest" />
<label for="guest">In House</label>
</p>
<p>
<input type="radio" name="type" id="walk_in" value="walk_in" />
<label for="walk_in">Walk in</label>
</p>
<p>
<input type="text" name="roomnumber" class="roomNumber" value="12345" />
</p>
</form>
Javascript:
$("form input:radio").change(function () {
if ($(this).val() == "walk_in") {
// Disable your roomnumber element here
$('.roomNumber').attr('disabled', 'disabled');
} else {
// Re-enable here I guess
$('.roomNumber').removeAttr('disabled');
}
});
I created a fiddle here: http://jsfiddle.net/k28xd/1/

Personally, for me, the best solution for a similar issue was:
HTML
<input type="radio" name="selectAll" value="true" />
<input type="radio" name="selectAll" value="false" />
JQuery
var $selectAll = $( "input:radio[name=selectAll]" );
$selectAll.on( "change", function() {
console.log( "selectAll: " + $(this).val() );
// or
alert( "selectAll: " + $(this).val() );
});
*The event "click" can work in place of "change" as well.
Hope this helps!

A different way
$("#inline_content input[name='type']").change(function () {
if ($(this).val() == "walk_in" && $(this).is(":checked")) {
$('#select-table > .roomNumber').attr('enabled', false);
}
});
Demo - http://jsfiddle.net/cB6xV/

Seems like you're #inline_content isn't there! Remove the jQuery-Selector or check the parent elements, maybe you have a typo or forgot to add the id.
(made you a jsfiddle, works after adding a parent <div id="inline_content">: http://jsfiddle.net/J5HdN/)

put ur js code under the form html or use $(document).ready(function(){}) and try this.
$('#inline_content input[type="radio"]').click(function(){
if($(this).val() == "walk_in"){
alert('ok');
}
});