Question

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

假设有人从第一个，第二个和第三个选择了一个选项 - 然后从第一个选择了一个空白值 - 我希望所有后续的 - 无论有多少 - 再次被禁用。< / p>

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

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

给出以下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应该可以工作：

var sels = $("select");
sels.not(":first").prop("disabled", true);
sels.change(function() {
    if($(this).val() !== "0") {
        $(this).next().prop("disabled", false);   
    }
    else {
        $(this).nextAll("select").val("0").prop("disabled", true);
    }
});

您可以在行动here中看到它。它只是禁用除第一个select之外的所有事件，将change事件绑定到所有事件，并在事件处理程序中检查是否已选择有效值。如果是，则启用下一个select。如果没有，它会禁用它。请注意，.prop要求jQuery版本至少为1.6。如果您必须使用旧版本，则可以安全地使用.attr。

Answer 2

jQuery中有一个很棒的函数叫做：nextAll();

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

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

您只需要正确指定您想要影响的select。

Answer 3

这里有一些元素，首先，您可以使用.index ^docs方法找出当前更改的选择的索引。< / p>

$('select').change(function(){
   var $this = $(this);
   // find the index of the changed selects within all selects
   var index = $('select').index($this); 
})

其次，您可以使用gt() ^docs选择器停用所有后续选择。

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

});

实例：http://jsfiddle.net/mQmfb/

Answer 4

您可以查看已经处理过您的问题的jquery插件。有关示例，请参阅此jquery plugin page。

然而，如果您想在选择上一个选项时启用选择，您可能会更好：

首先禁用所有选择。
在页面加载时（或在您的代码中，根据HTML的创建方式）启用第一个
启用关注选择.change()事件和正确的选择器（取决于您的HTML代码（因此您没有发布它，我们无法帮助您）< / LI>

jQuery - 禁用后面的选择

4 个答案: