Question

Has anyone ever experienced this situation?

I’ve got a JQuery method that works well with selects and checkboxes AS LONG as they are positioned as predetermined (select => checkbox). But the moment I position them the other way around (checkbox <= select) the “effects” of the method on the checkboxes “change places” somehow (a checkbox that should be disabled is not and one that should be enabled is instead disabled). Also, it doesn’t happen in all cases but rather “by pairs” (when a checkbox should be enabled and is not, the following checkbox is enabled when it shouldn’t and then it reverts to normalcy again until the next time the same thing happens).

I am talking about two large divs with float left & right, each containg a series of children divs with a select and a checkbox inside each child div; selects and checkboxes are not “inverted” in the left large div and are inverted in the right large div.

I should remark that this affects the “inverted” checkboxes only. Selects work as expected no matter how they are positioned.

I,ve tried to separate (by creating the proper JQuery selector) those conflicting checkboxes by id of parent div, by select class, etc. to no avail. Everything works well if all elements are positioned like selects to the left and checkboxes to the right.

The code:

<div>

    <div style="width: 49.5%; float: left;">

        <div>
            <select id="select_01"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
            <input id="check_box_01" type="checkbox" />
        </div>

        <div>
            <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" />
        </div>

        <div>
            <select id="select_03">
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>                    
            </select>
            <input id="check_box_03" type="checkbox" />
        </div>

        <div>
            <select id="select_04">
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>                    
            </select>
            <input id="check_box_04" type="checkbox" />
        </div>

    </div>

    <div style="width: 49.5%; float: right;">

        <div>
            <input id="check_box_05" type="checkbox" />
            <select id="select_05"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
        </div>

        <div style="border: 1px solid red;">
            <input id="check_box_06" type="checkbox" />
            <select id="select_06"> 
                <option value="first" selected="selected">First option</option>
                <option value="">Whatever as prompt...</option> 
            </select>
        </div>

        <div style="border: 1px solid red;">
            <input id="check_box_07" type="checkbox" />
            <select id="select_07"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
        </div>

        <div>
            <input id="check_box_08" type="checkbox" />
            <select id="select_08"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
        </div>

    </div>

</div>

---

$(document).ready(function() {
    $("select, :checkbox").each(function() {
        if ($(this).is("select")) {
            mySelectId = $("#" + $(this).attr("id"));
            if (mySelectId.attr("value") === "") {
                mySelectId.css({
                    "background": "#D3D3D3"
                });
            }
        } else if ($(this).is(":checkbox")) {
            myCheckboxId = $("#" + $(this).attr("id"));
            if (mySelectId.attr("value") === "") {
                myCheckboxId.attr("disabled", "disabled");
            }
        }
    });
});

And the problem:

screencapture of the problem

You can interact with the code if you wish: http://jsfiddle.net/CarlosPF/Unbsb/

Any help or suggestions will be greatly appreciated. Thanks in advance to you all.

By the way, what the method does is to darken those selects with nothing selected and disable its corresponding checkboxes (or viceversa)

Answer 1

mySelectId in your else if clause if out of scope.

the offending code (pseudo form):

    if (select) {
        mySelectId = "some value"
        }
    } else if (checkbox) {
        if (mySelectId.attr("value") === "") { // <-- mySelectID was never properly set!
            //do whatever
        }
    }

EDIT:
I’ve changed your jQuery:

$(document).ready(function() {
    $("select").each(function() {
        if ( $(this).val() === "") {
            $(this).css("background-color", "#d3d3d3");
            $(this).siblings(":checkbox").attr("disabled", "disabled"); 
        }   
    });
});