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

How to keep an element state unchanged forcefully

I have a form which behaves normally, with the inputs validated by simple validation. We installed a plugin, which provides some in-depth validation.
The issue arises when the plugin disables the submit button if it's validation fails on the elements it's watching.
How can I keep the submit on active state at all time without making any modification to the plugin files. However, I will have control on the page itself, so I can alter anything.
A simple JSFiddle I created to illustrate the situation:
JSFiddle
HTML
<form action="#" id="form">
Name: <input type="text" id="name" class="form-field">
<span class='error-message'>Name is required</span><br>
Age: <input type="text" id="age" class="form-field">
<span class='error-message'>Age is required</span><br>
Password: <input type="password" id="pass" class="adv-form-field">
<span class='error-message'>Advanced messages</span>
<button id="submit">Submit</button>
</form>
CSS
.error-message{
display: none;
}
JavaScript (jQuery)
// Simple validation to check if the fields have values
$(".form-field").on("blur", function(){
if(this.value == ""){
$(this).next(".error-message").css("display", "block");
} else {
$(this).next(".error-message").css("display", "none");
}
});
// Suppose this is the advanced function | we will have no control over this
$("#submit").prop("disabled", true);
$(".adv-form-field").on("blur", function(){
if(this.value == ""){
$(this).next(".error-message").css("display", "block");
$("#submit").prop("disabled", true);
} else {
$(this).next(".error-message").css("display", "none");
$("#submit").prop("disabled", false);
}
});

You can add your own event handlers after the plugin has initialised, and these will effectively override (not actually override) the plugin event handlers...
If you add this it will run on document.ready...
$(function() {
// set submit button enabled after input field blur
$(".adv-form-field").on("blur", function() {
$("#submit").prop("disabled", false);
});
// set initial state of submit button
$("#submit").prop("disabled", false);
});

I don't know which plugin you are using, but from my previous experience with form validation plugins instead of typing <button id="submit">Submit</button> use:
<input type="submit" id="submit">

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');
}
});

Hide on radio button

I have two radio buttons that are YES (value=1) and NO (value=0), I'm using the following code to show a hidden division when you click on YES:
$("#regaddress").change(function(){
if ($(this).val() == "1" ) {
$("#registeredaddress").slideDown("fast"); //Slide Down Effect
} else {
$("#registeredaddress").slideUp("fast"); //Slide Up Effect
}
});
Code for Radio Buttons:
<input name="regaddress" id="regaddress" type="radio" value="1">Yes
<input name="regaddress" id="regaddress" type="radio" value="0" checked> No
What I need is the code to hide that division when you click NO. Should be a simple answer for some of you, but personally feel like banging my head against a wall this afternoon trying to work out how to hide it!

That's easy enough, because you posted no id or name attributes in your original question, I've abstracted it out to the following:
html
<form action="" method="post">
<fieldset>
<input type="radio" value="0" name="state" id="no" />
<label for="no">No</label>
<input type="radio" value="1" name="state" id="yes" />
<label for="yes">Yes</label>
</fieldset>
</form>
<div id="hidden">This div is hidden</div>
jQuery
$(document).ready(
function(){
$('input:radio[name=state]').change(
function(){
if ($(this).val()==1) {
$('#hidden').show();
}
else {
$('#hidden').hide();
}
}
);
});
Demo of the above posted at JS Fiddle.
Amended slightly to take into account the slideUp() and slideDown() usage:
$(document).ready(
function(){
$('input:radio[name=state]').change(
function(){
if ($(this).val()==1) {
$('#hidden').slideDown(1000).text('This div is no longer hidden.');
}
else {
$('#hidden').slideUp(1000).text('This div is now hidden.');
}
}
);
});
Demo at JS Fiddle.
Final edit to take into account your id and name attributes:
$(document).ready(
function(){
$('input:radio[name=regaddress]').change(
function(){
if ($(this).val()==1) {
$('#registeredaddress').slideDown(1000).text('This div is no longer hidden.');
}
else {
$('#registeredaddress').slideUp(1000).text('This div is now hidden.');
}
}
);
});
Demo at JS Fiddle

Also, if you're interested, I did something similar that you can use for pretty much any type of checkbox or form element. Dynamic Show Hide. It may be a little overboard for what you're doing but it's handy if you do this thing a lot since you can stick it in it's on js file and call it whenever you need it.