In JQuery, How can I avoid two $(this) selectors from causing conflict to each other as part of an each() method? - jquery-selectors

Question

everybody.
I'm sort of newbie in JQuery and I'm trying to do the following: I've got both select and checkbox elements and I want certain changes to occur each time the document is loaded or refreshed. What I mean is, the background of the selects should be different depending on whether an empty option (or prompt) is currently selected or not. Also, depending on the former, an (accompanying) checkbox should be enabled or disabled as well (empty option selected => checkbox disabled OR the other way around).
Now, I won't be inputting any ids (from selects or checkboxes) manually. Instead, I want to get them all dinamically by using an each method on the correct selector. And that's where the problem arises.
So, lets say we've got this:
<select id="select_01">
<option value="">Whatever as prompt...</option>
<option value="first">First option</option>
</select>
<input id="check_box_01" type="checkbox" />
<select id="select_02">
<option value="first" selected="selected">First option</option>
<option value="">Whatever as prompt...</option>
</select>
<input id="check_box_02" type="checkbox" />
and in a script I put this:
$(document).ready(function() {
$("select,:checkbox").each(function() {
mySelectId = $("#" + $(this).attr("id"));
myCheckboxId = $("#" + $(this).attr("id"));
if (mySelectId.attr("value") === "") {
mySelectId.css({
"background": "grey"
});
myCheckboxId.attr("disabled", "disabled");
}
});
});
The problem, as you can see, is the $("select,:checkbox").each method not being able to discern which $(this) represents what (well, that and my own obvious lack of knowledge to solve this problem).
If I leave one of the selectors out, everything works well but (obviously) it only affects selects or checkboxes, but not both. Something like this works (the background changes as it should but checkboxes are left unaffected):
$(document).ready(function() {
$("select").each(function() {
mySelectId = $("#" + $(this).attr("id"));
if (mySelectId.attr("value") === "") {
mySelectId.css({
"background": "grey"
});
}
});
});
¿Can I make mySelectId and myCheckboxId two different, easily recognizable variables within the scope of the method? Any help will be greatly appreciated. Thanks in advance!
Carlos Pardilla.
PD: (I wanted to say "Hi everybody" on top, but the edits keep on cutting the whole greeting - dont' know why)

Answer 1

In your loop, the each() function, you do not get the elements as pairs.
You get them one-by-one.
I would do it in two steps (two loops), one for the selects, one for the checkboxes.

Answer 2

if ( $(this).is("select") ) {
mySelectId = $("#" + $(this).attr("id"));
}else if (( $(this).is(":checkbox") ) {
myCheckboxId = $("#" + $(this).attr("id"));
}

Answer 3

Well, I finally managed to get it working thanks to the both of you:
$(document).ready(function() {
$("select, :checkbox").each(function() {
if ($(this).is("select")) {
mySelectId = $("#" + $(this).attr("id"));
if (mySelectId.attr("value") === "") {
mySelectId.css({
"background": "grey"
});
}
} else if ($(this).is(":checkbox")) {
myCheckboxId = $("#" + $(this).attr("id"));
if (mySelectId.attr("value") === "") {
myCheckboxId.attr("disabled", "disabled");
}
}
});
});
The only thing I do not find myself entirely confortable with is with having to repeat if (mySelectId.attr("value") === "") {, (I try to apply Rails's DRY philosophy when possible), but I'm sure I'll find a workaround.
I find the is() method (wich I wasn't previously too familiar with) to be of much help in situations such as these.
Feel free to tinker with this as you'll please: http://jsfiddle.net/CarlosPF/DsHUp/
Many thanks to you both! Your help has been invaluable.
Carlos Pardilla.