Question

我在第一个项目上取得了很大的进步，但是遇到了一个小绊脚石，我将内容包装在了divs下面，然后单击了启用下拉菜单的复选框，然后将其包装了下来。我已经将其包装在divs中，该复选框不再起作用，我一直在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>

Answer 2

.prev() method搜索DOM中元素的前身。

因此，要选择下拉列表，应将$(this).prev()替换为$('.dropdown')

$(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 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>

在div中包装换行复选框会破坏javascript

2 个答案: