What I am hoping to achieve is when I tick a checkbox it applies an integer to a total. When it is unchecked, the default value is zero.
With html:
<input id="my_checkbox" type="checkbox" />
<div id="my_total">0.00</div>
and jQuery script on domReady:
$(document).ready(function(){
$("#my_checkbox").change(function(){
if($(this).is(':checked')) {
$('#my_total').html('333.45');
} else {
$('#my_total').html('0.00');
};
}).trigger('change');
});
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">
I'm trying to disable these radio buttons when a the loadActive link is clicked but for some reason it only disables the first in the order and then skips the rest.
<form id="chatTickets" method="post" action="/admin/index.cfm/">
<input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
<input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
Load Active
And Here is the jquery i'm using:
jQuery("#loadActive").click(function() {
//I have other code in here that runs before this function call
writeData();
});
function writeData() {
jQuery("input[name='ticketID']").each(function(i) {
jQuery(this).attr('disabled', 'disabled');
});
}
Remove your "each" and just use:
$('input[name=ticketID]').attr("disabled",true);
That simple. It works
I've refactored your code a bit, this should work:
jQuery("#loadActive").click(writeData);
function writeData() {
jQuery("#chatTickets input:radio").attr('disabled',true);
}
If there are more than two radio buttons on your form, you'll have to modify the selector, for example, you can use the starts with attribute filter to pick out the radios whose ID starts with ticketID:
function writeData() {
jQuery("#chatTickets input[id^=ticketID]:radio").attr('disabled',true);
}
just use jQuery prop
$(".radio-button").prop("disabled", false);
$(".radio-button").prop("disabled", true); // disable
First, the valid syntax is
jQuery("input[name=ticketID]")
second, have you tried:
jQuery(":radio")
instead?
third,
why not assign a class to all the radio buttons, and select them by class?
I just built a sandbox environment with your code and it worked for me. Here is what I used:
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form id="chatTickets" method="post" action="/admin/index.cfm/">
<input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
<input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
Load Active
<script>
jQuery("#loadActive").click(function() {
//I have other code in here that runs before this function call
writeData();
});
function writeData() {
jQuery("input[name='ticketID']").each(function(i) {
jQuery(this).attr('disabled', 'disabled');
});
}
</script>
</body>
</html>
I tested in FF3.5, moving to IE8 now. And it works fine in IE8 too. What browser are you using?
code:
function writeData() {
jQuery("#chatTickets input:radio[id^=ticketID]:first").attr('disabled', true);
return false;
}
See also: Selector/radio, Selector/attributeStartsWith, Selector/first
You can try this code.
var radioBtn = $('<input type="radio" name="ticketID1" value="myvalue1">');
if('some condition'){
$(radioBtn).attr('disabled', true); // Disable the radio button.
$('.span_class').css('opacity', '.2'); // Set opacity to .2 to mute the text in front of the radio button.
}else{
$(radioBtn).attr('disabled', false);
$('.span_class').css('opacity', '1');
}
I am tasked with having one checkbox within multiple divs. When the checkbox is checked, I want to hide the div. I want to use Jquery to implement this functionality. I feel I am close, but missing something essential.
Here is my code and any help would be greatly appreciated.
Thanks,
Roka
<div id='legGroup1' class="elementGroup">
<input type="checkbox" class="delCheck" id="1" />Delete</label>
</div>
<div id='legGroup2' class="elementGroup">
<input type="checkbox" class="delCheck" id="2" />Delete</label>
</div>
<button type='button' id='removeLeg'></button>
$("#removeLeg").click(function (e) {
$('.delCheck').each(function () {
if (this.id.prop('checked')) {
$("#legGroup" + this.id).hide();
}
});
});
You can simply find the parent element:
$("#removeLeg").click(function() {
$('.delCheck:checked').each(function() {
// ^^^^^^^^ -> look it filters only checked elements
$(this).parent().hide();
});
});
Or, more accurate, using closest method:
$(this).closest('.elementGroup').hide();
Since your using an each function, base it off the value of the items in the array the function returns.
$("#removeLeg").click(function (e) {
$('.delCheck').each(function (key, value) {
if ($(value).is(':checked')) {
$(value).parent().hide();
}
});
});
First of all, you're missing an open label tag in your HTML.
<label><input type="checkbox" class="delCheck" id="1" />Delete</label>
As for the click event, you can try this, to loop through each checked checkbox and hide their closest div parent.
$(document).ready(function(){
$('#removeLeg').on('click', function(){
$('.delCheck:checked').each(function(){
$(this).parents('div').hide();
});
});
});
Here's a demo: https://jsfiddle.net/nx9e1yp5/1/
I tried many of the ideas I found here to uncheck a checkbox when a different checkbox is checked, but none are working ...
Right I now I have :
$("#chkBox1").click(function () {
if ($(this).is(":checked")) {
$('#chkBox2').prop('checked', false); }
});
..but no results, chkBox2 remains checked
here is a checkbox in HTML:
<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />
one possible difference in my code is that the checkboxes are only added to the page when a button is clicked, using href...the checkboxes are in the HTML (not created in Javascript)..but are not visible until a button is clicked..may this be part of the problem? Or am I missing something else? Also, I am using JQuery Mobile.
You need to refresh it after changing its' .prop, using .checkboxradio('refresh').
Demo
// Check #chkBox2 by default
$('#chkBox2').prop('checked', true).checkboxradio('refresh')
// Uncheck #chkBox2 when #chkBox1 is checked
$('#chkBox1').on('click', function () {
if ($(this).is(':checked')) {
$('#chkBox2').prop('checked', false).checkboxradio('refresh');
}
});
jQuery Mobile API reference
sorry, I should have kept reading!
this seems to do the trick:
$('#chkBox1').checkboxradio('refresh');
..but I am not exactly sure why, is this something unique to JQuery Mobile?
Html
<input type="checkbox" name="art" id="chkBox1" data-mini="true" data-theme="c" />
<input type="checkbox" name="art2" id="chkBox2" data-mini="true" data-theme="c" checked="checked" />
jQuery:
(function ($) {
$(document).ready(function () {
$("#chkBox1").click(function () {
if ($(this).is(":checked")) {
$('#chkBox2').prop('checked', false);
}
});
});
})(jQuery);
Working example here http://jsfiddle.net/SwmN6/75/
You are checking this, and changing chkBox2:
if ($(this).is(":checked")) {
$('#chkBox2').prop('checked', false); }
Try this instead:
if ($('#chkBox2').is(":checked")) {
$('#chkBox2').prop('checked', false); }
Or simply:
$('#chkBox2').prop('checked', false);
I am having a problem with getting my JQuery javascript code to apply to the select box elements that it is supposed to. What's happening is that the select boxes are not following the actions that are specified in the javascript code. They are simply staying disabled and checked (see code below) instead of changing based on the first checkbox's selection.
I believe it is a problem regarding how I specify the location of the select boxes in the javascript code, but I don't know how to go about fixing it. Then again, I could be wrong about that too.
If you have any insight on this or can correct the code, please do! Cheers.
HTML:
<div class="medium_box">
<form name="searchform" class="FECKsearch" method="get" onSubmit="return dosearch();">
<input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
<input type="submit" name="searchsubmit" class="button" value="Go" />
<span class="searcher">International: <input type="checkbox" id="International" checked="yes"></input></span>
<span class="searcher1">Americas: <input type="checkbox" id="Americas" disabled checked="yes"></input></span>
<span class="searcher1">Europe: <input type="checkbox" id="Europe" disabled checked="yes"></input></span>
Asia: <input type="checkbox" id="Asia" disabled checked="yes"></input>
</form>
</div>
Javascript:
$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
$('#Americas').attr('checked', 'checked');
$('#Americas').attr('disabled', 'disabled');
$('#Europe').attr('checked', 'checked');
$('#Europe').attr('disabled', 'disabled');
$('#Asia').attr('checked', 'checked');
$('#Asia').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});
Update & Solution:
Cheers to John for the code $('#International').live("click",function() { which corrected the error of the JQuery code not functioning. Apparently if you are importing the code from a remote file you must include the "live" portion inside of your coding.
Thanks again John!
$('#International').live("click",function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
$('#Americas').attr('checked', 'checked');
$('#Americas').attr('disabled', 'disabled');
$('#Europe').attr('checked', 'checked');
$('#Europe').attr('disabled', 'disabled');
$('#Asia').attr('checked', 'checked');
$('#Asia').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});
For Dynamic content (includes and element dom creation after page load) use live.
Have a nice day
There's a lot of room for tightening the following code up, but it works:
$('#International').click(function() {
var paramChangeBoxes = $('input:checkbox');
if ($(this).is(':checked')) {
if (!$('#Americas').is(':checked')) {
$('#Americas').click();
}
$('#Americas').attr('disabled', 'disabled');
if (!$('#Europe').is(':checked')) {
$('#Europe').click();
}
$('#Europe').attr('disabled', 'disabled');
if (!$('#Asia').is(':checked')) {
$('#Asia').click();
}
$('#Asia').attr('disabled', 'disabled');
} else {
paramChangeBoxes.removeAttr('disabled');
$('#Americas').removeAttr('disabled');
$('#Europe').removeAttr('disabled');
$('#Asia').removeAttr('disabled');
}
});