We Keep Coding

How to set the value of a select box when it is enabled only?

I have a top level select box that when a user makes a selection here, I want this value to be used for all the below select boxes relating to this top level box.
The problem I am having is that, if any one of the lower select boxes is disabled, I want the above process to ignore this select box as it has already been assigned a value.
Obviously, if the lower select box is enabled then I want to assign the top select value to it.
To disable the select list based on a particular value, I have used:
$("select[name=f03]").eq(index).attr('disabled', 'disabled');
Here is the jQuery that I have used but is not working:
var top_select = $("select[name=f07]").val();
$("select[name=f03]").each(function(index){
if $("select[name=f03]").eq(index).is(':enabled'){
$("select[name=f03]").eq(index).val(top_select);
}
});
From this code, it is the lower selects ([name=f03]) that I am trying to set only when it is enabled.

First I would disable select like this:
$("select[name=f03]").eq(index).prop('disabled', true);
Second, your function should be much simpler:
$("select[name=f03]").each(function(){
if ($(this).prop('disabled')) return;
$(this).val(top_select);
});

you should use jquery :enabled selector as follow
$("select[name=f03]:enabled").each(function(){
//execution
});
or
$("select[name=f03]:enabled").val("value");
here is jsfiddle example http://jsfiddle.net/kso2oqr5/1/

When you are disabling elements use .prop(property,value)
var top_select = $("select[name=f07]").val();
$('select[name="f03"]').val(function(){
if(!this.disabled){
return top_select;
}
});
DEMO

Get value of text box using based on radio button selection jQuery

I created a HTML table that has a radio button, delete button, and a text box in each row. When I select the apply button, I want to get the value of the text box in the same row as the checked radio button. Attached is my fiddle. Any help would be greatly appreciated :)
<input type="text" name="context" class="chooseContext"/>
This is the text that I am wanting to figure out how to alert based on which radio button is selected.
JSFiddle Code

Not sure if it's the most elegant solution but you can do this
//Send selected default to add on
$(".contexts-list tr input[type='radio']:checked").each(function() {
var val = $(this).parents("tr").find("input.chooseContext").val();
alert("Default: " + val);
});
Demo of it working

you can alert it like this:
$('#applyButton').on('click', function(){
var alertTxt = $(':radio:checked').closest('tr').find('.chooseContext').val();
alert(alertTxt);
});
Updated Fiddle

I solve this kind of things by using parents property in jQuery.
so usually when you click on something do a
$(this).parents('tr').find('input[type=text]').val();
So the hint here is to pick up the parent element row and then try finding the desired element in that row to take action.

You can set a number on id of input radio and input text, then you can check what of the radios of the same group is checked, then take the id of this radio and get the val of input text that has the same id. Wait i´m doing the jsfiddle... Regards!
EDIT: Here are users faster than me, Regards!

3 Dependent selection boxes

I have 3 exactly the same selection boxes generated by PHP code.
I want to disable each selected option on the other selection boxes.
I've found this Answer and using it's 2nd edit fiddle there I've almost got what I need in this section:
sel.nextAll().each(function(){
if(prev){
$(this).find("[value='" + prev+ "']").prop("disabled",false);
}
$(this).find("[value='" + val + "']").prop("disabled",true);
});
Thing is, that the selection disable affect only the following selection boxes and not backwards, meaning: when selecting option in the 3rd (most right) selection box, it is not disabled on the other selection boxes.
I tried using prevAll combining the the nextAll but with not much of success.
Any idea how could I reach this kind of behavior?
Thanks in advance.

I have added a new code under nextAll side.
sel.nextAll()....
...
sel.prevAll().each(function(){
if(prev){
$(this).find("[value='" + prev+ "']").prop("disabled",false);
}
$(this).find("[value='" + val + "']").prop("disabled",true);
});
Code: http://jsfiddle.net/RaBuQ/160/
When select something from 3rd selectbox, will disable options from another selectboxes.

Using data attributes to filter a select box (using third party JS filtering code)

I am using this relatively simple JS program:
http://www.barelyfitz.com/webdesign/articles/filterlist/
The program just filters a select box using a text box.
However, I want to jquery and HTML5 data attribute which is different how it was originally used. I give my text box filterer a data attribute:
<input id="filter_text" name="filter_text" data-filterable="myselect"
type="text" />
I use the following jquery to get the name of the select box that is to be filtered and then filter the select box:
$(function() {
$('input[data-filterable]').keyup(function() {
select_box_name = $($(this).data('filterable'))[0];
filter = new filterlist(select_box_name);
filter.set(this.value);
});
});
which NEARLY works. You can filter but if you press backspace to de-filter then nothing happens i.e. it doesn't 'unfilter'.
It must be something really small!!
Thank you :).

You need to initialize the filter outside the event handler:
$(function() {
$("input['data-filterable']").each(function() {
var filter = new filterlist($($(this).data('filterable'))[0]);
$(this).keyup(function() {
filter.set(this.value);
);
});
});

On every keyup you're reinitializing filter. So you can only filter on the select as it is right when you press a key. Move the initialization of the filter out of the keyup event and it's working.
Here's a fiddle.

jquery- how to obtain the text shown on screen in a radio button/check box/list/drop down

I am working to parse a form and obtain the values of all elements, including the text boxes, radio buttons, check boxes, list boxes and drop down boxes.
I am currently able to obtain the values for all of the above... By values I mean the value as assigned to that element (eg radio button)... However in some cases the text shown on screen for a value (in a radio/check box/drop down/list) is different from the text actually assigned to that value (when the form is submitted).
For your reference, I am using code similar to the following for obtaining all the 'options' of a list/drop down text box-
if($(this).is('select'))
{
$(this).find('option').each(function(){
alert( " Option value=" + $(this).val() );
});
}
For check box/radio button I am using val() which obtains all the assigned values.
Code that does this is given below--
textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" + $(this).attr('type');
alert (textmsg);
How do I obtain the text value shown on screen (for radio buttons/check boxes/lists /drop down boxes)??

You can do that with jQuery.fn.text().
$(this).text();

For:
Radiobuttons: Check what is in the label, belonging to the button like $('#radioid label').html();
Checkboxes: see #1 -> html()
List item: $('ul#mylist li').html();
dropdownbox: like your example, but use our friend html() again :D
Good luck
PS: html() is your friend, but text() as indicated by your commenters will do fine too!