javascript - 将复选框包裹在 div 内会破坏 javascript

Question

我的第一个项目取得了很大的进展，但我遇到了一个小绊脚石，我将下面的内容包装在 div 内，在执行此操作之前，当我单击复选框时，它启用了下拉菜单，但现在我已将其包装在 div 内，该复选框不再起作用，我一直在 getbootstrap.com 上阅读，但我一直无法找到解决方案，如果有人可以指导我正确的方向，这样我就可以从我所犯的错误中吸取教训，我们将不胜感激，非常感谢。

        $(document).ready(function() {
            $('.dropdown').attr('disabled', 'disabled');
            var $checkBox = $('.options');
            $checkBox.on('change', function(e) {
                var $select = $(this).prev();
                if (this.checked) {
                    $select.removeAttr('disabled');
                } else {
                    $select.attr('disabled', 'disabled');
                }
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="row">
            <div class="col">
                <input type="checkbox" class="options" id="options">Dropdown
            </div>
            <div class="col">
                <select class="dropdown" disabled>
                    <option value="1">Item #1</option>
                    <option value="2">Item #2</option>
                    <option value="3">Item #3</option>
                </select>
            </div>
        </div>
    </div>

Answer 1

你需要

var $select = $('.dropdown');

而不是 prev() 因为 prev 获取 dom 中的前一个元素，因此您需要通过它的类或另一个选择器来定位您的选择。

<div class="container">
<div class="row">
    <div class="col">
        <input type="checkbox" class="options" id="options">Dropdown
    </div>
    <div class="col">
        <select class="dropdown" disabled>
            <option value="1">Item #1</option>
            <option value="2">Item #2</option>
            <option value="3">Item #3</option>
        </select>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.dropdown').attr('disabled', 'disabled');
        var $checkBox = $('.options');
        $checkBox.on('change', function(e) {
            var $select = $('.dropdown');
            if (this.checked) {
                $select.removeAttr('disabled');
            } else {
                $select.attr('disabled', 'disabled');
            }
        });
    });
</script>