jQuery-禁用选择后面的

我正在尝试创建一些下拉菜单，这些菜单的值取决于前面的选择。 我试图实现的是，如果前面的一个没有选择值，那么下面的所有选择都将被禁用

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

我收集了表格中的所有选择：

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>

我认为，也许我应该获取所选索引的索引，然后禁用所有其他索引，但我不太知道如何做到这一点

以下是表单的结构：

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>

选择一个
选择1
选择2
----
----

---

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

您可以看看已经解决了您的问题的jquery插件。请参见下面的示例

但是，如果要在选择上一个选项时启用选择，可能最好：

首先禁用所有选择

在页面加载时启用第一个（或在代码中，取决于HTML的创建方式）

使用事件和正确的选择器启用下面的选择（取决于您的HTML代码（因此您尚未发布，我们无法提供更多帮助）

---

您可以看看jquery插件，它们已经可以处理您的问题了

但是，如果要在选择上一个选项时启用选择，可能最好：

首先禁用所有选择

在页面加载时启用第一个（或在代码中，取决于HTML的创建方式）

使用事件和正确的选择器启用下面的选择（取决于您的HTML代码（因此您尚未发布，我们无法提供更多帮助）

---

给定以下HTML：

<select>
    <option value="0">-Choose-</option>
    <option value="1">Valid option</option>
</select>
<select>
    <option value="0">-Choose-</option>
    <option value="1">Valid option</option>
</select>
<!-- As many selects as you like -->

---

您可以看到它的作用。它只是禁用第一个

选择

，将

更改

事件绑定到所有事件，并在事件处理程序中检查是否选择了有效值。如果选择了有效值，它将启用下一个

选择

。如果没有，它将禁用它。请注意，至少需要jQuery版本1.6。如果选择了要使用旧版本，您可以安全地使用

.attr

。

给定以下HTML：

<select>
    <option value="0">-Choose-</option>
    <option value="1">Valid option</option>
</select>
<select>
    <option value="0">-Choose-</option>
    <option value="1">Valid option</option>
</select>
<!-- As many selects as you like -->

---

您可以看到它的作用。它只是禁用第一个

选择

，将

更改

事件绑定到所有事件，并在事件处理程序中检查是否选择了有效值。如果选择了有效值，它将启用下一个

选择

。如果没有，它将禁用它。请注意，至少需要jQuery版本1.6。如果选择了要使用旧版本，您可以安全地改用

.attr

。

其中有一些元素，首先，您可以使用

.index

方法找出当前更改的选择的索引

其次，您可以使用

gt（）

选择器禁用以下所有选择

$('select').change(function(){
    var $this = $(this);
   var index = $('select').index($this);
   $('select:gt(' + index + ')').attr('disabled',$this.val() == '');

});

---

实例：

这其中有一些元素，首先，您可以使用

.index

方法找出当前更改的select的索引

其次，您可以使用

gt（）

选择器禁用以下所有选择

$('select').change(function(){
    var $this = $(this);
   var index = $('select').index($this);
   $('select:gt(' + index + ')').attr('disabled',$this.val() == '');

});

---

实例：

jQuery中有一个很棒的函数，名为：

nextAll（）

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

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

---

您只需要正确地指定要影响的

选择
。
jQuery中有一个很棒的函数，名为：
nextAll（）

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

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

您只需正确指定要影响的
选择
项。
谢谢James-这与您选择所有项，然后将第一个菜单更改为空白不太一样-只有第二个菜单被禁用-其他菜单保持不变。啊，非常正确。您应该能够轻松地修改它来实现这一点。只需禁用ll在
else
块中选择
elements而不是
nextSel
。@user398341-我已经更新了代码和小提琴，现在就试试吧。谢谢James-avall已经建议了nextAll（）这真是一种享受。感谢James，当你选择所有菜单，然后将第一个菜单更改为空白时，这并不完全正确，只有第二个菜单变为禁用状态，而其他菜单保持不变。啊，非常正确。你应该能够轻松地修改它来做到这一点。只需禁用所有后续的
select
元素，而不是
nextSel
在
else
块中。@user398341-我已经更新了代码和小提琴，现在就试试。谢谢James-avall已经建议了nextAll（），效果不错。抱歉-刚刚在我的帖子中添加了表单结构。@user398341:谢谢。实际上，James的答案非常清楚，应该适合你的需要：）抱歉-刚刚在我的帖子中添加了表单结构。@user398341:谢谢。事实上，James的答案非常清楚，应该符合您的需要：）我怀疑。find（'input[type=“select”]”）将为您提供选择，选择不是“input”元素。您应该使用.find（'select'）；instead.find（'input[type=“select”]”）将为您提供select，select不是“input”元素。您应该使用.find（'select'）；相反