Jquery, чтобы переключить выбор формы управления отключено состояние?

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

Я от никак не эксперт 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;
}

Затем вы можете вызвать $ ('# select2'). Disabled (false), когда select1выбран.Т.е.:

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

Преимущество функции .disabled () двоякое: 1) она отключает и отключает отключение, основываясь на переданном ей логическом значении, поэтомуВам не нужно дублировать «это должно быть включено или отключено?»логика везде.2) Он также «затеняет» текст, поэтому, если вы хотите обернуть его в некоторый или описательный текст, вы можете вызвать функцию для элемента обтекания, и текст будет выделен серым цветом, наряду с отключением выбора (илилюбые другие элементы ввода).

Чтобы заштрихованный текст работал правильно, вам также необходим класс «отключен» в вашем CSS.У меня все просто:

.disabled {
    color: #808080;
}

Вы можете захотеть что-то другое, чтобы соответствовать вашей теме.

Answer 3

Я придерживался немного другого подхода, используя index():

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

JS Fiddle demo .

Поскольку у вас есть элементы <br /> как родственные элементы к элементам select, я предоставил селектор методу index(), который находит index() элемента в соответствии с указанным селектором, а не среди все (или все родственные) элементы.

Ссылки:

• change()
• eq()
• index()
• removeAttr().

Answer 4

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

... и т.д.

Я предполагаю, что вы, вероятно, захотите повторно активировать другие варианты выбора, если начальное состояние повторно выбрано.

Answer 5

Вам нужно установить обработчики событий, которые снимают блокировку при изменении первых двух полей <select>. Как то так:

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

Смотрите рабочую демонстрацию здесь . Примечание: Использование onchange иногда приводит к неожиданному поведению в IE. Возможно, вам придется использовать onclick (т.е. .click(function()) в jQuery).

Answer 6

Попробуйте это:

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