如何在Select2.js上禁用基于其他</select>的<select>

时间:2014-08-18 23:55:56

标签: javascript jquery select is-empty disabled-input

我在禁用“选择”输入方面遇到了一些麻烦。

只要在“estado”上没有选择任何内容,我就需要禁用“cidade”。

这是我的代码:

<select id="estado" class="select_customized">
    <option></option>
    <option value="sp">São Paulo</option>
    <option value="mg">Minas Gerais</option>
    <option value="rj">Rio de Janeiro</option>

</select>

<select id="cidade" class="select_customized">
     <option></option>
     <option value="sao-paulo">São Paulo</option>
     <option value="minas-gerais">Minas Gerais</option>
     <option value="rio-de-janeiro">Rio de Janeiro</option>

</select>

这是我正在使用的脚本:

$("#cidade").select2("enable", false); 

    $("#estado").on('change',function(){

    var is_empty = $('#estado').is(":empty");

        if(is_empty){

            $("#cidade").select2("enable", false); 

        }

        else {

            $("#cidade").select2("enable", true); 

        }

    });

这种方式有效,但每当我在“estado”输入上选择并再次清除它时,“cidade”不会再次禁用...任何建议?

2 个答案:

答案 0 :(得分:3)

您可能希望使用select2调用来检查选择框是否为空,而不是进入您创建的原始#estado框(因为它被select2隐藏)。

您的电话:

var is_empty = $('#estado').is(":empty");

然后可以改为:

var is_empty = $('#estado').select2("val") == "";

这对我来说很有意义。请注意,上面的实际比较会略有不同,例如,如果您使用的是多值选择框。

答案 1 :(得分:2)

我认为你确实需要。你只需要设置.on('更改')就可以使它工作,就像这个小提琴一样。

更新:比我想象的要容易。

http://jsfiddle.net/fczo7tLq/2/

$("#cidade").prop('disabled', 'disabled');
$("#estado").on('change', function() {
    var that = $("#estado option:selected").val();
    if (that !== "empty") {
        $("#cidade").prop('disabled', false);
    } else { 
         $("#cidade").prop('disabled', 'disabled');        
    }


});