Question

我有一个包含3个下拉列表的表单，我希望逐步切换禁用状态。我想最初禁用第2和第3个下拉菜单，当用户从第1个选择选项时，第2个选项被启用，当第2个选项被选中时我希望第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>

Answer 1

您可以使用这样的简单nextAll()来执行此操作：

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

示例：http://jsfiddle.net/niklasvh/uFzbX/

Answer 2

试试这个：

$(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);
        }
    });
});

工作示例@

http://jsfiddle.net/djajg/

Answer 3

您需要设置事件处理程序，以便在更改前两个<select>字段时删除禁用。像这样：

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

查看有效的演示here。 注意：使用onchange有时会导致IE中的意外行为。您可能必须使用onclick（即jQuery中的.click(function())）。

Answer 4


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

...等

我假设如果重新选择初始状态，你可能想要重新编写其他选项。

Answer 5

我使用index()：

对其他人采取了略微不同的方法

$('select').change(
    function(){
        var i = $(this).index('select');
        $('select').eq(i+1).removeAttr('disabled');
    });

JS Fiddle demo

因为您有<br />元素作为select元素的兄弟元素，所以我为index()方法提供了一个选择器，该方法根据元素找到index()元素到指定的选择器，而不是所有（或所有兄弟）元素。

参考文献：

Answer 6

我是绝不是 jQuery专家，所以可能有更好的方法来做到这一点。但我写了一个简单的函数（我相信它真的是一个超级简单的jQuery插件），就像这样：

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

然后，当选择select1时，您可以调用$（'＃select2'）。disabled（false）。即：

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

.disabled（）函数的优点是双重的： 1）根据传递给它的布尔值，禁用和取消禁用，因此您不需要复制“应该启用还是禁用？”到处都是逻辑 2）它也“灰显”文本，所以如果你想用一个或一些描述性文本包装你，你可以调用包装元素上的函数，文本将变灰，同时禁用选择（或任何其他输入元素）。

要使灰色文本正常工作，您还需要在CSS中使用“禁用”类。我很简单：

.disabled {
    color: #808080;
}

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

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

6 个答案: