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

【问题标题】：Jquery to toggle select form control disabled state?Jquery切换选择表单控件禁用状态？
【发布时间】：2011-09-16 17:24:25
【问题描述】：

我有一个包含 3 个下拉列表的表单，我想逐步切换禁用状态。 I want to disable the 2nd and 3rd dropdown initially, when the user selects an option from the 1st, the 2nd is enabled, when the 2nd option is selected I want the 3rd to be enabled.

如何用 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>

【问题讨论】：

标签： jquery forms controls

【解决方案1】：

您可以像这样使用简单的nextAll() 来做到这一点：

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

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

【讨论】：

非常感谢。完美运行！

【解决方案2】：

当前两个 <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())）。

【讨论】：

【解决方案3】：


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

...等等。

我假设如果重新选择初始状态，您可能想要重新禁用其他选择。

【讨论】：

【解决方案4】：

试试这个：

$(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/

【讨论】：

【解决方案5】：

我采取了与其他人略有不同的方法，使用index()：

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

JS Fiddle demo.

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

参考资料：

【讨论】：

【解决方案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) 它根据传递给它的布尔值禁用和 un-disables，因此您不需要重复“应该启用还是禁用？”到处都是逻辑。 2）它也“变灰”文本，所以如果你想用一个或一些描述性文本包装你的，你可以在包装元素上调用函数，文本将变灰，同时禁用选择（或任何其他输入元素）。

为了使灰显文本正常工作，您还需要在 CSS 中添加一个“禁用”类。我的很简单：

.disabled {
    color: #808080;
}

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

【讨论】：