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

Question

有没有人遇到过这种情况？

我有一个 JQuery 方法，可以很好地与选择和复选框一起使用，因为它们的位置是预先确定的（选择 => 复选框）。但是，当我将它们以另一种方式定位时（复选框

我说的是两个左右浮动的大 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");
            }
        }
    });
});

还有问题：

screencapture of the problem

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

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

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

Answer 1

mySelectId 如果超出范围，请在您的 else if 子句中。

违规代码（伪形式）：

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