Question

我有这些选择元素。我想要做的就是在第一次禁用之后接下来的两次。选择第一个后，只在选择后直接启用下一个。

＆＃13;

$(document).ready(function(){
    $('.model-select').prop('disabled', 'disabled');
    $('.year-select').prop('disabled', 'disabled');
});

$('select').change(function(){
   $('.carSelect').next().attr('disabled','');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="make-list" id="make-list">
                        <div class="make-wrap">
                            <select class="carSelect make-select">
                                <option>Make</option>
                                <option data-tag="audi" data-index="0">Audi</option>
                                <option data-tag="bmw" data-index="1">BMW</option>
                            </select>
                        </div>
                        <div class="model-wrap">
                            <select class="carSelect model-select">
                                <option>Model</option>
                            </select>
                        </div>
                        <div class="year-wrap">
                            <select class="carSelect year-select">
                                <option>Year</option>
                            </select>
                        </div>
                    </div>

＆＃13;

我所做的每次尝试都会删除两次选择后的禁用，但这不是必需的。只有一个之后。

Answer 1

如果不是一步一步，请选择第一个并启用所有

$('select').change(function(){
   $('.carSelect').closest('div').next().find('select').prop('disabled',false);
});

如果一步一步启用则（选择第一，启用第二，选择第二，启用第三）

$('select').change(function(){
   $(this).closest('div').next().find('select').prop('disabled',false);
});

Answer 2

您可以添加data-id进行选择，并使用它们来启用它们。这样，即使您的HTML结构发生更改，代码仍将保持不变。

＆＃13;

$(document).ready(function(){
    $('.model-select').prop('disabled', 'disabled');
    $('.year-select').prop('disabled', 'disabled');
});

$('select').change(function(){
   $("select[data-id='"+($(this).data("id")+1)+"']").prop("disabled",'')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make-list" id="make-list">
                        <div class="make-wrap">
                            <select class="carSelect make-select" data-id="0">
                                <option>Make</option>
                                <option data-tag="audi" data-index="0">Audi</option>
                                <option data-tag="bmw" data-index="1">BMW</option>
                            </select>
                        </div>
                        <div class="model-wrap">
                            <select class="carSelect model-select" data-id="1">
                                <option>Model</option>
                                <option data-tag="A57" data-index="0">Audi</option>
                            </select>
                        </div>
                        <div class="year-wrap">
                            <select class="carSelect year-select"  data-id="2">
                                <option>Year</option>
                            </select>
                        </div>
                    </div>

＆＃13;

直接启用下一个选择，而不是全部

2 个答案: