Jquery是否切换选择表单控件禁用状态？

我有一个带有3个下拉列表的表单，我想逐步切换禁用状态。我想首先禁用第二个和第三个下拉列表，当用户从第一个选项中选择一个选项时，第二个选项被启用，当选择第二个选项时，我想启用第三个选项

如何使用jquery实现这一点？谢谢

代码如下：

<select name="type" id="select1" style="width:200px" onchange="populate(1);">
<option value="" selected="selected">Select Option 1</option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>
<br /><br />
<select name="make" id="select2" style="width:200px" onchange="populate(2);"disabled="disabled">
<option value="">Select Option 2</option>
<option value="first2">First</option>
<option value="second2">Second</option>
<option value="third2">Third</option>
</select>
<br /><br />
<select name="model" id="select3" style="width:200px" onchange="Go(this);"disabled="disabled">
<option value="">Select Make</option>
<option value="first3">First</option>
<option value="second3">Second</option>
<option value="third3">Third</option>

试试这个：

$(function(){
    $("#select1").change(function(){
        if($(this).val() == ""){
            $("#select2").attr("disabled", true);
            $("#select2").val("");
            $("#select2").change();
        } else {
            $("#select2").attr("disabled", false);
        }
    });

    $("#select2").change(function(){
        if($(this).val() == ""){
            $("#select3").attr("disabled", true);
            $("#select3").val("");
        } else {
            $("#select3").attr("disabled", false);
        }
    });
});

工作示例@

---

您需要设置事件处理程序，以便在更改前两个字段时删除禁用。大概是这样的：

$(document).ready(function(){
    $('#select1').change(function(){
        if ($(this).val() != '')
            $('#select2').removeAttr('disabled');
    });
    $('#select2').change(function(){
        if ($(this).val() != '')
            $('#select3').removeAttr('disabled');
    });
});

$('select').change(function(){ 
   $(this).nextAll('select:first:disabled').prop('disabled',false);
})

jQuery.fn.disabled = function (tf) {
    $('input,textarea,checkbox,select',this).attr('disabled',tf);
    if ( tf)
        this.addClass('disabled');
    else
        this.removeClass('disabled');
    return tf;
}

---

看一个工作演示。注意：使用onchange有时会导致IE中出现意外行为。您可能必须使用onclick，即jQuery中的clickfunction。

您可以使用以下简单的下一步操作：

$(document).ready(function(){
    $('#select1').change(function(){
        if ($(this).val() != '')
            $('#select2').removeAttr('disabled');
    });
    $('#select2').change(function(){
        if ($(this).val() != '')
            $('#select3').removeAttr('disabled');
    });
});

$('select').change(function(){ 
   $(this).nextAll('select:first:disabled').prop('disabled',false);
})

jQuery.fn.disabled = function (tf) {
    $('input,textarea,checkbox,select',this).attr('disabled',tf);
    if ( tf)
        this.addClass('disabled');
    else
        this.removeClass('disabled');
    return tf;
}

例如：

……等等

---

如果重新选择初始状态，我假设您可能希望重新显示其他选择。

我对其他选择采取了稍微不同的方法，使用索引：

因为您将元素作为select元素的同级元素，所以我为index方法提供了一个选择器，它根据指定的选择器而不是在所有或所有同级元素中查找元素的索引

参考资料：

, , , . 我绝不是jQuery专家，所以可能有更好的方法来实现这一点。但我已经编写了一个简单的函数，我相信它确实是一个超级简单的jQuery插件，如下所示：

$(document).ready(function(){
    $('#select1').change(function(){
        if ($(this).val() != '')
            $('#select2').removeAttr('disabled');
    });
    $('#select2').change(function(){
        if ($(this).val() != '')
            $('#select3').removeAttr('disabled');
    });
});

$('select').change(function(){ 
   $(this).nextAll('select:first:disabled').prop('disabled',false);
})

jQuery.fn.disabled = function (tf) {
    $('input,textarea,checkbox,select',this).attr('disabled',tf);
    if ( tf)
        this.addClass('disabled');
    else
        this.removeClass('disabled');
    return tf;
}

然后您可以调用$'select2'。选择select1时禁用false。即：

$(document).ready(function(){
    $('#select1').change(function(){
        $('#select2').disabled( $(this).val() == '' );
    });
    $('#select2').change(function(){
        $('#select3').disabled( $(this).val() == '' );
    });
})

.disabled功能的优点有两个： 1根据传递给它的布尔值，它将禁用和取消禁用，因此您不需要复制应该启用还是禁用它？逻辑无处不在。 2它也会使文本变灰，因此，如果您想用或和一些描述性文本包装文本，您可以调用包装元素上的函数，文本将变灰，同时禁用select或任何其他输入元素

为了使灰显文本正常工作，CSS中还需要一个“disabled”类。我的想法很简单：

.disabled {
    color: #808080;
}

---

您可能需要一些不同的东西来匹配您自己的主题。

非常感谢。很好用！