I'm disabling groups of radio buttons when a user clicks a checkbox, just using raw javascript and the disabled property.
My function is trivial:
function toggleEnabled(elementId) {
e = document.getElementById(elementId)
e.disabled = !e.disabled;
}
and it is called with the onClick event like onClick="toggleEnabled('radio_div')"
It works great, but if the user clicks back, the browser seems to remember the state of the checkbox, but resets the state of the components in the div to whatever they originally were.
This is in IE7, and I do not want to use a JS library right now so please no suggestions to that effect.
Am I doing something wrong? Is there a solution to get the intended behaviour (remember the state of both the checkbox and the div on Back)?
You have to check each radio box value within your onload method:
var selects = document.getElementByTagName("select");
for ( var i = 0 ; i < selects.length ; i ++ )
{
//call your code if an option is checked
if ( selects.options[selects.selectedIndex] )
{
var selectedOption = selects.options[selects.selectedIndex];
//now you got your option and can enable the div.
toggleEnabled('radio_div');// <-- change this depending on selectedOption
}
}
Related
I have following jquery code, where on click of a check box I will show a popup value.
Except in IE,in all other browser it works as expected. That is, on change the check box will be checked and the popup will be opened.
However in IE8 its not getting checked, however popup is displayed properly.
Code :
$('#TAndC').change(function(){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
If your element is a checkbox and not a dropdown then use click anyway.
If your selector is referring to a dropdown use click if you need to support IE8 and older.
See why that is below.
According to the MSDN for change/onchange, the event is not triggered until the change is committed.
In addition the event is also not triggered when the value is changed programmatically.
To quote:
This event is fired when the contents are committed and not while the
value is changing. For example, on a text box, this event is not fired
while the user is typing, but rather when the user commits the change
by leaving the text box that has focus. In addition, this event is
executed before the code specified by onblur when the control is also
losing the focus. The onchange event does not fire when the selected
option of the select object is changed programmatically. Changed text
selection is committed.
To invoke this event, do one of the following:
Choose a different option in a select object using mouse or keyboard navigation.
Alter text in the text area and then navigate out of the object.
If you must support IE8 and older, you are probably better of to use the click event instead which get's triggered when you release the mouse and your new choice is selected.
instead of .change use below code and try
$(document).ready(function(){
$(document).on('click','#TAndC',click_function){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
});
I've got a base background image and two checkboxes. I need replace the background image (via toggle class) with the correct class depending on which checkbox is selected. If both checkboxes are selected I need it to show the black background.
http://jsfiddle.net/2k96D/6/
$('#ax_lab').change(function () {
if ($('#ax_ov').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_lab');
}
});
$('#ax_ov').change(function () {
if ($('#ax_lab').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_over');
}
});
My fiddle works perfectly when I select and deselect in the same order, however, if I de-select the checkboxes in a different order than the order I selected them in, it doesn't default back to the original class. I know there must be a flaw in my logic, I'm just having trouble finding it. Any thoughts?
You need to be more explicit with the logic. Here's what I did:
$(document).ready(function () {
function updateAxialStatus() {
var axOv = $('#ax_ov').prop('checked'),
axLab = $('#ax_lab').prop('checked');
$('.axial').removeClass('axial_all axial_lab axial_over');
if (axOv && axLab)
$('.axial').addClass('axial_all');
else if (axOv)
$('.axial').addClass('axial_over');
else if (axLab)
$('.axial').addClass('axial_lab');
}
$('#ax_lab, #ax_ov').change(updateAxialStatus);
});
That version just explicitly checks the status of the two checkboxes and updates the class to reflect the status. The same handler can be used for both checkboxes.
Note that old versions of IE may not fire the "change" event for checkboxes until the checkbox loses focus, but you can safely use "click" instead.
I've looked at and tried numerous answers on this topic but can't seem to find a solution that works. I might be missing something obvious in which case I apologise but here's my problem:
I have a checkbox nested within a DIV element, this DIV element has a jQuery click event attached to it which then checks whether the checkbox is checked or not and then either checks/unchecks it. Depending on whether it has been checked/unchecked it then sends a variable to a PHP script to add into a session variable.
This all works fine when it's the DIV that has been clicked but when the checkbox is clicked I think some bubbling occurs as it fires the event for unchecking the checkbox every time. I've tried using stopPropogation(); and preventDefault(); attached to the checkbox click event but to no avail.
Here's some sample code to try and make this clearer:
Checkbox HTML code:
<div class='bundle_offer' id='bundle_offer_0'>
<input type="checkbox" />
</div>
Click function:
// Click function on bundle offer div to add booster
$(".bundle_offer").click(function (event) {
// IF its not the checkbox clicked, send over the div id
if (event.target.type !== 'checkbox') {
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id);
}
}); // end bundle offer click function
the bundle_offer_click function simply takes the id of the DIV clicked, finds the checkbox, checks/unchecks it and then sends the appropriate variable to the PHP script via AJAX.
EDIT:
I managed to fix the problem by moving round the logic a bit, here is what I changed it to:
// Click function on bundle offer div to add booster
$(".bundle_offer").mouseup(function (event) {
// Get whether checked or not
var isChecked = $(this).find('input').is(':checked');
// IF its not the checkbox clicked
// check/uncheck
// send over the div id
if (event.target.type !== 'checkbox') {
if(isChecked == false){
// Check
$(this).find('input').attr('checked',true);
}
else{
// Uncheck
$(this).find('input').attr('checked',false);
}
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
}); // end bundle offer click function
Main difference is using the mouseup function instead and doing the logic for checking/unchecking the checkbox within that mouseup function rather than the bundle_offer_click one.
In case you click on check box browser automatically check/uncheck checkbox. you don't need do that using JavaScript.
I believe inside bundle_offer_click you are checking/unchecking checkbox. you should pass a flag as second parameter in bundle_offer_click flag value should be depend on clicked element. and inside bundle_offer_click based on flag take action on checkbox.
code:
function bundle_offer_click(id, isCheckBoxClicked){
if(isCheckBoxClicked){
//do nothing on check box
}
}
I have a set of radio buttons with an onclick event that hides/shows an area of the website. The onclick also enables/disables spry validation.
The onclick is working great! However, not sure how to trigger the onclick when the page is loaded and the radio button is marked as clicked.
For example, the user may select radio button on the main page. Then later in the form process the user may want to edit the input that they put in. I would then check the radio button that the user had selected on the main page. Since the user has not clicked the radio button the hidden area still remains hidden.
window.onready=function()
{
if(document.getElementById('yourRadioButtonId').checked) {
//call your function, that you want to be triggered, as you will have the same call back function bounded for your onclick event
}
or
window.onready=function()
{
var radioButton=document.getElementById('yourRadioButtonId');
if(radioButton.checked) {
radioButton.click();
}
}
Note: Not not all browsers allow simulated events in this way. Please see the jQuery source for the trigger method to see how all the browser quirks are handled.
The best way to handle this is to write a helper function. Later, this helper function can be called by both of onClick (on radio button) and onLoad (on body element) events. This function will get the valu of your radio button and will do the stuff based on the result.
For example:
function handleRadioButtonStateAction() {
var radioButtons = document.getElementsByName('theRadioButtonName');
for (var x = 0; x < radioButtons.length; x ++) {
if (x == yourDesiredButton && radioButtons[x].checked) {
//do action
}
}
}
I have this jQuery script that works fine:
$("select").change(function () {
var finalPrice = 0;
$("select option:selected").each(function () {
if ($.cookie('descuentoGen') != null){
finalPrice = Math.floor(precios[$(this).index()]*$.cookie('descuentoGen'));
} else{
finalPrice = precios[$(this).index()];
}
});
$("#precioFinal").text(finalPrice);
})
.trigger('change');
As you can see, it simply does some action when the user selects another option in the select.
Now, in a different script I'm calling this:
document.getElementById('selectFoods').selectedIndex = t;
This works as it should since it actually changes the selected option, the problem is, that why I change the selected option this way, the actions from the initial jQuery script are not executed.
Is there any way around this or will I have to duplicate the jQuery script behaviour in the other script?
Just try this
$('#selectFoods').prop('selectedIndex', t).change();
DEMO
Using selectedIndex will not trigger a change event. You've to trigger it by yourself.
I think you will have to trigger the event yourself, as i could know there's no a listener that tracks every select box's selectedIndex so that when selectedIndex changes the js engine could trigger the event. that is to say, it is the default change() behavior that changes the selectedIndex, but not contrary.