JQuery方法的奇怪情况&元素定位

Question

有人经历过这种情况吗？

我有一个 JQuery 方法，只要它们按预定位置定位（select => checkbox），它就可以很好地处理选择和复选框。但是当我以相反的方式放置它们时（复选框<=选择），该方法对复选框的“效果”会以某种方式“更改位置”（应该禁用的复选框不是，而应该启用的复选框则被禁用） ）。此外，它并不是在所有情况下都会发生，而是“成对”发生（当应该启用一个复选框而没有启用时，以下复选框在不应该启用时启用，然后再次恢复正常，直到下一次相同的情况为止）事情发生了）。

我说的是两个带有 float left & 的大 div。右图，每个子 div 包含一系列子 div，每个子 div 内都有一个选择和一个复选框；选择和复选框在左侧大 div 中不会“反转”，而在右侧大 div 中反转。

我应该指出，这仅影响“倒置”复选框。无论职位如何，都会按预期选择工作。

我尝试通过父 div 的 id、选择类等来分离（通过创建正确的 JQuery 选择器）那些冲突的复选框，但无济于事。如果所有元素都像左侧的选择和右侧的复选框那样定位，那么一切都会正常进行。

代码：

<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");
            }
        }
    });
});

问题：

问题的屏幕截图

您可以如果您愿意，请与代码进行交互： http://jsfiddle.net/CarlosPF/Unbsb/

任何帮助或建议将不胜感激。预先感谢大家。

顺便说一句，该方法的作用是使那些未选择任何内容的选择变暗，并禁用其相应的复选框（反之亦然）

Answer 1

如果超出范围，则将 else if 子句中的 mySelectId 包含在内。

有问题的代码（伪形式）：

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

编辑：
我改变了你的 jQuery：

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