Как отключить <select> на основе других <select> на Select2.js

Question

У меня возникли небольшие проблемы с отключением "выбора" ввода.

Мне нужно отключить "cidade" всякий раз, когда ничего не выбрано на "estado".

вот мой код:

<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" снова не отключается... какие-либо предложения?

Answer 1

Возможно, вы захотите использовать вызов select2, чтобы проверить, является ли поле выбора пустым, вместо того, чтобы идти в исходное поле #estado, которое вы создали (так как оно скрыто select2).

Ваш звонок:

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

тогда может быть изменено на что-то вроде:

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

и это сделало работу за меня. Обратите внимание, что фактическое сравнение, приведенное выше, будет немного отличаться в зависимости, например, если вы используете многозначное поле выбора.

Answer 2

Я думаю, что вам нужно на самом деле. Вам просто нужно установить.on('change'), чтобы он работал, как эта скрипка.

ОБНОВЛЕНИЕ: проще, чем я думал.

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');        
    }


});