This is just an add on to my last question. Once I deselect the radio button I need to return the background color to its original state. So the solution we came up with is:
$(document).ready(function(){
$('input:radio').change(function(){
$(this).closest('div').toggleClass('highlight');
});
});
Now I need to remove the highlight class when the radio button is deselected - any ideas?
Try this, group your radios using the name attribute and the following js should work
Demo
$('input:radio').change(function(){
$('div.highlight').removeClass('highlight');
$(this).closest('div').addClass('highlight');
});
yes, I agree with redsquare, you can see this my code demo on jsfiddle, with the div onclick select the radio.
$('table div').click(function() {
$(this).find('input:radio').prop('checked', true);
$('div.highlight_row').removeClass('highlight');
$(this).closest('div').addClass('highlight');
});
you can see the full code here, but the change is on tr class, not the div class :
JsFiddle Code Sample
Related
I have a table where all line have a input(type:radio) as an rowid.
In this way, I want mark the input as checked when the user click at line from the respective radio and so on in all lines.
$('tr').on('click' ,function(){
$(this).find('input[type=radio]').prop('checked':true);
});
When you click any TR find the radio's inside it and check them manually
$('#rowId').on('click', function() {
$('#radioIdForRow').prop('checked', true);
}.bind(this));
This is the same as #joyBlanks's answer, but gives you the flexibility to have the radio button not be within the DOM tree of the row.
I have a problem... I tried to remove the selected items from dijit.form.MultiSelect when I click on button, but don't work...
Here is the code:
btnRemove = dijit.byId("btnRemove"); // button ID
List= dijit.byId("List"); // ID List of items which I want
// to remove when click on someone item
on(btnRemove , "click", function(evt){ // onClick event
alert(dijit.byId("List").attr("value")); // returns a label of element
// here must be a code to remove a selected item from MultiSelect - but don't work...
List.containerNode.removeChild(dijit.byId("List").attr("value"));
});
all code is in Javascript..
thanks
I solved this problem... if any will need this:
because I didn't find that dijit.form.MultiSelect has a removeChild option, I used a another hidden dijit.form.MultiSelect in which move items from the first MultiSelect...
Code for this is:
btnRemove = dijit.byId("btnRemove");
on(btnRemove, "click", function(evt){
dijit.byId("Removed").addSelected(dijit.byId("List"));
});
where Removed is the ID of hidden MultiSelect and the List is ID of a visible dijit.form.MultiSelect
you can use below code for remove all elements
while (btnRemove.hasChildNodes()) {
btnRemove.removeChild(btnRemove.lastChild);
}
not sure what is wrong with this jquery code: http://jsfiddle.net/aCABM/
I want to to grey out the dropdown menu when 'yes' is selected. When no is selected it can be selected if the user so wishes.
Select the elements by radio button name there is no need to select them individually by there ids and use prop instead of attr since you are manipulating its disabled property. Try this.
$(function(){
$("input[name='discount']").click(function() {
$("#discountselection").prop("disabled", this.value == 'Yes');
});
});
Demo
In your fiddle there were few issues.
Missed to include jQuery library
You cannot just begin your markup with td, it should be enclosed with table and tr element.
In the Js window you just have to put your js, no need to have script tags.
check updated code here
http://jsfiddle.net/ylokesh/aCABM/1/
Update code here:
http://jsfiddle.net/aCABM/6/enter link description here
You need to wrap your code in a $(document).ready() function, like so:
$(document).ready(function() {
$("#Yes").click(function() {
$("#discountselection").attr("disabled", false);
//$("#discountselection").show(); //To Show the dropdown
});
$("#No").click(function() {
$("#discountselection").attr("disabled", true);
//$("#discountselection").hide();//To hide the dropdown
});
})
Also, you didn't setup jsFiddle correctly, it required jQuery library and (document)ready()
You can use this :
$("#Yes").click(function() {
$("#discountselection").show();
});
$("#No").click(function() {
$("#discountselection").hide();
});
and remove the disable="disable".
Good-Luck !
At the moment my code clones 3 dropdowns everytime you click the add button.
I managed to get it to copy the row exactly because before, the first dropdown would reset by itself but the other two would not so I was just wondering how to reset all 3 dropdowns?
It is easiest to see in this JSFiddle:
http://jsfiddle.net/jydqK/7/
So, if you change the first dropdown to agent and then click the + you will see the second row appears duplicated whereas I would like it to reset to tags, operands and values.
Any help greatly appreciated.
You can use removeAttr to remove selected attribute and then fire a change() event.
In your case:
dropdownclone.find('select.tags option:selected').removeAttr('selected');
dropdownclone.find('select.tags option:first').attr('selected','selected');
dropdownclone.find('select.tags').trigger('change');
Modified example: http://jsfiddle.net/ZF3mc/2/
If I understood your question, you want the duplicated row of selects to reset their values.
In this case you can just remove this:
dropdownclone.find('select').each(function(index, item) {
//set new select to value of old select
$(item).val( $dropdownSelects.eq(index).val() );
});
and replace it with:
dropdownclone.find('option').attr('selected', false);
Find all dropdowns in your clone. For each dropdown, check every option tags for a selected attribute and remove it. Something like this:
clone.find('select').each(function() {
$(this).find('option').each(function() {
$(this).removeAttr('selected');
});
});
Or better yet, find only the selected option tags using :selected filter before removing.
I downloaded the script from emposha.com/javascript/fcbklistselection-like-facebook-friends-selector.html and made a few modifications, as the source wasn't working as required (When submitting the form, all of the values were being sent to the php handler, not just the checked ones).
My working example is in this Demo.
My issue is this: how can I check a group of <lis> so that I could have a 'Select All' button?
You can do it like this:
$("#fcbklist li input:checkbox").attr("checked", true);
Or if you want a toggle on that select all box that checks when it's checked, unchecks all when it's not, do this:
$("#selectAll").change(function() {
$("#fcbklist li input:checkbox").attr("checked", this.checked);
});
To get the effect you want with the plugin though, you'll need to fire a click on the parent as well, like this:
$("#selectAll").change(function() {
$("#fcbklist li input:checkbox").attr("checked",this.checked).parent().click();
});
You can try a working sample here.