jQuery - 禁用选择后面的内容

Question

我正在尝试创建许多下拉菜单，其值取决于之前的选择。 我想要实现的目标是，如果前一个选择尚未选择值，则所有后续选择都将被禁用。

假设有人从第一个、第二个和第三个选项中选择了一个选项 - 然后从第一个选项中选择了一个空白值 - 我希望以下所有选项 - 无论有多少 - 再次被禁用。

我收集了表单中的所有选择:

var sels = obj.closest('form').find('input[type="select"]');

我认为也许我应该获取所选索引的索引，然后禁用所有其他索引，但不太知道该怎么做。

以下是表单的结构:

<form action="" method="post">  

<select name="option-1" id="option-1">
    <option value="">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>


<select name="option-2" id="option-2">
    <option value="">----</option>
</select>

<select name="option-3" id="option-3" disabled="disabled">
    <option value="">----</option>
</select>   

</form>

现在 - 我知道如何启用它们 - 我只需要了解当用户将菜单值之一更改为空白时如何禁用所有相关的。

Answer 1

jQuery 中有一个很棒的函数:nextAll();

当您编写事件处理程序来选择如下所示的字段时，您可以使用此函数跳转到所有下一个选择并禁用它们。

$("select").change(function(){
  $("select").removeAttr("disabled");
  if($(this).val()==0){
    $(this).nextAll().attr("disabled","disabled");
  }
});

您只需正确指定要影响的选择。