I have a list of radio buttons that I update programmatically based upon a user's selection from a different list. This code properly finds the radio button that matches the selected item and selects it, but it doesn't deselect the previously selected radio button.
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).prop("checked",true).checkboxradio('refresh');
}
});
All of the radio buttons in the major_groups div have the same name, so I thought selecting one would unselect the others. I got it to work by looping through the buttons again and refreshing all of them, but this seems inefficient.
Also, will .prop("checked",true) fire the change event?
What about just triggering a click event on the radio button, something like this:
$('#major_groups input[type=radio]').each(function(){
if($(this).attr("value") == group_name){
$(this).click();
}
});
Your each loop will only call refresh on the radio with specific value, and will not be called on others in the same group. The actual inputs of the group will be automatically unchecked but your plugin won't recognize the ones that are deselected unless you refresh them too.
Try this:
var $radios=$('#major_groups input[type=radio]');
/* first check the appropriate radio*/
var $radioToUpate=$radios.filter(function(){
return this.value=group_name;
}).prop("checked",true);
/* then refresh all radios with same name*/
$radios.filter('[name="'+ $radioToUpate.attr('name') +'"]').checkboxradio('refresh');
A link to the plugin docs might be helpful to see if plugin has methods to handle the property change that might take care of the whole group
Related
So here's the code I'm using to make it so any checkbox of a certain class can only have one option selected among the others with the same class.
$(function() {
$(".single-checkbox1").on("click", function() {
$(".single-checkbox1").not(this).prop("checked", false);
});
});
Except, some of these checkboxes show objects when checked, like a text box or text area. The issue is that, unless you manually uncheck the box that shows the object before checking a different box, the object doesn't go away.
For example, if I checked box 1 to reveal textbox 1, then checked box 2 (the page then unchecks box 1 as only one box is allowed to be checked,) the textbox 1 will not disappear.
However, if I manually uncheck box 1 before checking box 2, textbox 1 WILL disappear. Has anyone encountered this error before?
Why don't you use radio buttons instead? Radio buttons in a group only allow one button to be checked at a time. You can do a change event or .each on the group and based on the checked property, you can hide or show the appropriate check boxes.
How do you show/hide the objects when a checkbox is (un)checked? Is it in another on click handler?
If so, I think $(".single-checkbox1").prop("checked", false) only unchecks the checkbox but doesn't call its handler (so the object will not show/hide). It may be better to do something like:
$(".single-checkbox1").on("click", function() {
$(".single-checkbox1:checked").not(this).click();
// If it's a different handler, do
// $(".single-checkbox1:checked").not(this).trigger('whateverHandler');
// If this doesn't uncheck the box then do this instead
// $(".single-checkbox1:checked").not(this).prop("checked", false).click();
});
Create a plunker or snippet if none of this helps and we can try other solutions.
I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.
Solved by #Grundy, solution at bottom of post
I have a form with a radio option where the elements are selected programmatically and without the user directly clicking on the radio element.
var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
$("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
$elem.attr("checked", true); // Check the found element from before
}
This works, I can see the attributes change in Chrome's developer tools. The previous checked input is unchecked and the appropriate item becomes checked. This works every time specifically works multiple times (I'll explain why that's relevant later).
Next I hide all the unchecked radio buttons and show only the checked one.
$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();
This works the first time an input is selected. All the unchecked inputs will be hidden and the checked one will be unhidden. If the input is selected a second time (either immediately again or after other options have been selected in between) then all of the inputs are hidden including the checked one.
If I check the number of matched elements for $("input[name=type]:checked + label") it returns 1 for the first time and 0 for the second time meaning it won't be selected only after the second time. I feel like this is because the checked attribute has been changed dynamically at that point but that may not be the cause of the problem.
EDIT - Here's a Fiddle
fiddle Clicking on the gray box will show you its normal behavior when changed by the user clicking on the values. Each value can be selected multiple times in any order but if you click the text at the bottom (they're poor looking buttons) it will change the form programmatically. It only works for the first time, it does not seem to care if it was selected by the user previously.
Solution - Credit #Grundy
Since I know the $elem object I found earlier is the object being changed I can reference it directly instead of trying to search for an element with the checked attribute. So I use this:
var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes
Instead of using this:
$("input[name=type]:checked + label").show(); // Referenced after all the changes
try use
$elem.next("label").show();
instead of
$("input[name=type]:checked + label").show();
because $elem is checked checkbox that you find
I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.
Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle
Try to bind click event also.
Demo
$(document).on("change click","#loads",...
So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?
you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.
This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.
I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}
Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});